Question

我有3个div和3个按钮。我想要一个javascript代码，如果我点击button1然后所有的div应该是可见的。如果我点击button2，那么div2应该只是可见的，它应该是div1和div3的前面。如果我点击button3，那么div3应该只是可见的，它应该是div2和div3的前面。

我的代码如下：

[<html>
<head></head>
<body>
<input type="button" id="button1"  onclick="button1Click();"/>
<input type="button" id="button2" onclick="button2Click();"/>
<input type="button" id="button3" onclick="button3Click();"/>

<div id="id1">
      <input type="checkbox" />
</div>

<div id="id2">
<input type="checkbox" />
</div>

<div id="id3">
<input type="checkbox" />
</div>
 <script type="text/javascript">

        function button1Click() {     
            var DivId1 = document.getElementById("id1");
            var DivId2 = document.getElementById("id2");
            var DivId3 = document.getElementById("id3");

            DivId1.style.visibility = "visible";
            DivId2.style.visibility = "visible";
            DivId3.style.visibility = "visible";

        }

        function buttonClick2() {
            var DivId1 = document.getElementById("id1");
            var DivId2 = document.getElementById("id2");
            var DivId3 = document.getElementById("id3");         

            DivId1.style.visibility = "hidden";
            DivId2.style.visibility = "visible";
            DivId3.style.visibility = "hidden";
        }

        function buttonClick3() {

            var DivId1 = document.getElementById("id1");
            var DivId2 = document.getElementById("id2");
            var DivId3 = document.getElementById("id3");         

            DivId1.style.visibility = "hidden";
            DivId2.style.visibility = "hidden";
            DivId3.style.visibility = "visible";

        }


    </script>
    </body>

    </html>][1]

但是这个clickevent只能出现或消除div，但不能带来其他div的div。结果就像div前面的第二张照片一样有自由空间。

Answer 1

您可以使用visibility hidden/visible而不是display block/none，而隐藏元素时不会占用空间。这是你在找什么？

＆＃13;

function button1Click() {
	var DivId1 = document.getElementById("id1");
	var DivId2 = document.getElementById("id2");
	var DivId3 = document.getElementById("id3");

	DivId1.style.display = "block";
	DivId2.style.display = "block";
	DivId3.style.display = "block";

}

function buttonClick2() {
	var DivId1 = document.getElementById("id1");
	var DivId2 = document.getElementById("id2");
	var DivId3 = document.getElementById("id3");

	DivId1.style.display = "none";
	DivId2.style.visibility = "block";
	DivId3.style.display = "none";
}

function buttonClick3() {

	var DivId1 = document.getElementById("id1");
	var DivId2 = document.getElementById("id2");
	var DivId3 = document.getElementById("id3");

	DivId1.style.display = "none";
	DivId2.style.display = "none";
	DivId3.style.display = "block";
}

＆＃13;

<input type="button" id="button1" onclick="button1Click();" />
<input type="button" id="button2" onclick="buttonClick2();" />
<input type="button" id="button3" onclick="buttonClick3();" />

<div id="id1">
	<input type="checkbox" />111
</div>

<div id="id2">
	<input type="checkbox" />222
</div>

<div id="id3">
	<input type="checkbox" />333
</div>

＆＃13;

Answer 2

您应该使用DivId.style.display ='none'隐藏并使用DivId.style.display ='block'来显示。

Answer 3

如果您可以使用jQuery，则可以使用以下代码。如果您不能使用jQuery，则可以使用JavaScript来使用相同的方法。基本上，你需要做这些事情：

为每个按钮指定（使用某些属性），单击按钮时应显示哪些目标元素。
现在，将类或其他一些区别属性添加到需要显示/隐藏的内容div中。
在点击事件中，检查点击了哪个按钮，获取目标div，并显示它们，隐藏所有其他按钮。

@property
def user_timeline(self):
    """ :reference: https://dev.twitter.com/rest/reference/get/statuses/user_timeline
        :allowed_param:'id', 'user_id', 'screen_name', 'since_id', 'max_id', 'count', 'include_rts'
    """
    return bind_api(
        api=self,
        path='/statuses/user_timeline.json',
        payload_type='status', payload_list=True,
        allowed_param=['id', 'user_id', 'screen_name', 'since_id',
                       'max_id', 'count', 'include_rts']
    )

$("#links a").on("click", function(e){
  e.preventDefault();
  var targetClass = $(this).data("target");
  
  $("#contents .items").hide();
  $("#contents ." + targetClass).show();
});//#links a click()

#links{
  float: left;
  width: 100px;
}
#links a{
  display: block;
}

#contents{
  float: left;
}
#contents .items{
  background-color: #ddd;
  margin: 1px 0;
}

点击按钮使用javascript，在其他div的前面加一个div？

3 个答案: