Javascript 按下按钮时，百分比栏上升_Javascript_Jquery_Html_Css

Javascript 按下按钮时，百分比栏上升

javascript jquery html css

Javascript 按下按钮时，百分比栏上升,javascript,jquery,html,css,Javascript,Jquery,Html,Css,现在，如果你按下一个按钮，不管是哪一个，都会显示一个div和一个百分比。我已经准备好了，但是如果一个div被切换，另一个被按下，66%的div应该被切换，依此类推，如果两个div被显示，第三个被切换，100%的div应该出现。基本上，如果你点击一个按钮，在百分比栏上升后点击a，就会显示一个div和一个百分比div。我该怎么做？如果切换两个div，并且按下按钮，将显示两个不同的div JS HTML 不完全确定你的意思，但我想可能是这样的 HTML: 编辑：一个稍微整洁一点的方法是：另外，您

现在，如果你按下一个按钮，不管是哪一个，都会显示一个div和一个百分比。我已经准备好了，但是如果一个div被切换，另一个被按下，66%的div应该被切换，依此类推，如果两个div被显示，第三个被切换，100%的div应该出现。基本上，如果你点击一个按钮，在百分比栏上升后点击a，就会显示一个div和一个百分比div。我该怎么做？如果切换两个div，并且按下按钮，将显示两个不同的div

HTML

不完全确定你的意思，但我想可能是这样的

HTML:

编辑：一个稍微整洁一点的方法是：

另外，您应该看看jQuery，它使类似的事情变得更简单

编辑：

问题中必须提供相关代码。请在您的问题中发布代码，而不是链接。您能否解释一个简单的示例。3个按钮Id重复？div的Id也重复66%

和100%

。

function showhide()
{
    var div = document.getElementById("lol");
    var id3 = document.getElementById("3");
    var id5 = document.getElementById("5");

    if (div.style.display !== "none") 
    { 

        div.style.display = "none";
        id3.style.display = "none";
    }
    else {
        div.style.display = "block";
    }

}

function showhide2()
{
    var div2 = document.getElementById("lol2");

    if (div2.style.display !== "none") {
        div2.style.display = "none";
    }
    else {
        div2.style.display = "block";
    }
}

function showhide3()
{
    var div3 = document.getElementById("lol3");

    if (div3.style.display !== "none") {
        div3.style.display = "none";
    }
    else {
        div3.style.display = "block";
    }
}

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div id="lol"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
  <div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>  
  <button id="button" onclick="showhide2()">div2</button>   

  <button id="button" onclick="showhide3()">div3</button>   
  <div id = "3"><p>33%</p></div>
  <div id = "5"><p>66%</p></div>
  <div id = "5"><p>100%</p></div>
<!-- End your code here -->
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
  <div id="lol1"><p>div1</p></div>
  <div id="lol2"><p>div2</p></div>
  <div id="lol3"><p>div3</p></div>
  <button id="button" onclick="showhide()">div1</button>  
  <button id="button" onclick="showhide2()">div2</button>   
  <button id="button" onclick="showhide3()">div3</button>   
  <div id = "3"><p>33%</p></div>
  <div id = "5"><p>66%</p></div>
  <div id = "7"><p>100%</p></div>
</body>
</html>

var one = 0
var two = 0
var three = 0
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
var id7 = document.getElementById("7");
var div1 = document.getElementById("lol1");
var div2 = document.getElementById("lol2");
var div3 = document.getElementById("lol3");
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "none";

    function showhide()
{
    if (div1.style.display !== "none") 
    { 
        div1.style.display = "none";
        one = 0
    }
    else {
        div1.style.display = "block";
        one = 1
    }
    showper();
}

function showhide2()
{
    if (div2.style.display !== "none") {
        div2.style.display = "none";
        two = 0
    }
    else {
        div2.style.display = "block";
        two = 1
    }
    showper()
}

function showhide3()
{
    if (div3.style.display !== "none") {
        div3.style.display = "none";
        three = 0
    }
    else {
        div3.style.display = "block";
        three = 1
    }
    showper()
}

function showper()
{
    var sum = one + two + three

    id3.style.display = "none";
    id5.style.display = "none";
    id7.style.display = "none";

    if (sum == 1) {
        id3.style.display = "block";
    } else if (sum == 2) {
        id5.style.display = "block";
    } else if (sum == 3) {
        id7.style.display = "block";
    }
    else {
        id3.style.display = "none";
        id5.style.display = "none";
        id7.style.display = "none";
    }
}