javascript - 按下按钮时百分比条上升

the code so far

现在，如果您按下一个按钮，无论是哪个按钮，都会显示一个 div 和一个百分比。我已经知道了，但是如果一个 div 被切换，另一个 div 被按下，66% div 应该被切换等等，如果两个 div 被显示并且第三个被切换，100% div 应该出现。基本上，如果您单击一个按钮，则会显示一个 div 和一个百分比 div，如果您单击另一个按钮，则百分比栏会上升。我该怎么做呢？如果两个 div 被切换并且如果你按下按钮会显示两个不同的 div？

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";
    }
}

HTML

<!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>

最佳答案

不太确定你的意思，但我认为可能是这样的？

http://liveweave.com/PcZ7vL

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>

JavaScript:

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";
    }
}

编辑: 一个更简洁的方法是这样的:http://liveweave.com/YAHn55 .

此外，您应该看看 jQuery，它使此类事情变得更加简单。

编辑: see example

关于javascript - 按下按钮时百分比条上升，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24181859/

javascript - 按下按钮时百分比条上升

上一篇：html - 如何做水平子菜单

下一篇：php - 使用 from info 创建一个自动 div