<li> <div> 当使用 JavaScript 单击节目时

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>

我认为有些浏览器会允许你这样输入类型"text"、"password"one_answers"textarea"，但我不指望：最好使用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=属性来防止它们被视觉标记为链接（下划线、不同颜色等）

希望这能有所帮助。