Question

我想点击<li>a</li>然后显示<div>1</div> html代码：

<div id="tabs">
<ul>
    <li class="on">a</li>
    <li>b</li>
    <li>c</li>
</ul>
<div>
    1
</div>
<div class="hide">
    2
</div>
<div class="hide">
   3
</div>

css代码是：

.hide{display:none;}

js代码是：

 window.onload=function(){
        var tab = document.getElementById("tabs"); 
        var li = document.getElementsByTagName("li"); 
        var div = tab.getElementsByTagName("div"); 

        for(i=0;i<li.length;i++){
            li[i].a=i;   
            click(li[i]);
        }

        function click(obj){
            obj.onclick = function(){
                for(n=0;n<li.length;n++){
                    div[n].className="hide";
                }

                div[i].className="";
            }

        }
    }

我的想法是我为每个<li>设置了一个数字，当我点击此<li>时，我让所有<div>消失，只显示<div>我想。

但代码不起作用，它消失了所有<div>

Answer 1

好吧，我明白了。最后div[i].className="";应为div[obj.a].className="";

Answer 2

试试此代码

<li onclick="showit(1)">a</li>
<li onclick="showit(2)">b</li>
<div id="div1" class="divs" style="visibility: hidden;">1</div>
<div id="div2" class="divs" style="visibility: hidden;">2</div>

<script type="text/javascript">
  function showit(n)
  {

     var x = document.getElementsByClassName("divs");
     var i;
     for (i = 0; i < x.length; i++) {
       x[i].style.visibility = "hidden";
     }

     document.getElementById('div'+n).style.visibility = 'visible';
  }
</script>

Answer 3

我认为你不能这样做。 Javascript DOM仅支持click（）和onclick（），以便您可以单击。这包括：

<input type="checkbox"...>
<input type="radio"...>
<input type="submit"...>
<input type="image"...>
<input type="reset"...>
<input type="submit"...>
<input type="button"...>
<input type="file"...>
<button...>
<a href=...>
<area>

我认为有些浏览器会让你这样做来输入类型＆＃34;文字＆＃34;，＆＃34;密码＆＃34;和＆＃34; textarea＆＃34;，但我不会依靠这个：更好地使用onfocus（）来实现这些目标。

当我过去想要这样做时，我使用了链接元素：代码：

<div id="tabs">
<ul>
    <li class="on"><a href="#">a</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
</ul>
<div>
    1
</div>
<div class="hide">
    2
</div>
<div class="hide">
   3
</div>

您可以使用CSS text-decoration =和color =属性来防止它们被视觉标记为链接（下划线，不同颜色等）

希望这有帮助。

使用javascript单击<li> show <div>时

3 个答案: