javascript标签不起作用？

Question

我是javascript的新手。 所以首先我不想使用jquery来获取选项卡。 以下是我的代码。 但是它不起作用。如何更正我的代码。 谢谢。

.web_index{ position:relative;}
.web_index div{ width:400px; height:300px; background:#eee; position:absolute; left:30px;top:100px; }
ul li{ float: left; width:100px; height:30px; line-height:30px; list-style:none;}

<script type="text/javascript">
    function clicker(){
        var lier=document.getElementsByTagName("li");
        var diver=document.getElementsByClassName("web_index").getElementsByTagName("div");

        for(var i=0;i<lier.length;i++){
            for(j=0;j<diver.length;j++){
                if(i==j)
                    diver[j].style.display=block;
                }else{
                    diver[j].style.display=none;
                }   
            }
        }
    }   
</script>

</head>

<body >
<ul>
    <li onclick="clicker()" class="li01">one</li>
    <li onclick="clicker()" class="li02">two</li>
    <li onclick="clicker()" class="li03">three</li>
    <div class="web_clear"></div>
</ul>
<div class="web_index">
<div style="display:block" >content one</div>
<div style="display:none">content two</div>
<div style="display:none">content three</div>
</div>

我想单击one然后显示content one内容。所有内容都被隐藏。 两个然后显示content two ...

Answer 1

请参阅，关于您实施标签的问题，我建议您采取更好的方法。 相同的clicker函数可以接受DIV ID的参数，并且可以在调用它时将其传递。

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Tabs</title>
  <meta name="viewport" content="width=device-width">
  <style type="text/css">
    .web_index div {width: 400px; height: 300px; background: #eee;}
    ul li{width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
  </style>
</head>

<body>
<ul>
    <li onclick="clicker(1)">one</li>
    <li onclick="clicker(2)">two</li>
    <li onclick="clicker(3)">three</li>
</ul>
<div class="web_index">
  <div id="t1">content one</div>
  <div id="t2">content two</div>
  <div id="t3">content three</div>
</div>
<script type="text/javascript">
    function clicker(tab){
      document.getElementById("t1").style.display = "none";
      document.getElementById("t2").style.display = "none";
      document.getElementById("t3").style.display = "none";

      document.getElementById("t" + tab).style.display = "block";
    }
    clicker(1);
</script>
</body>
</html>

工作中

代替查找元素出现的index ，我们可以给每个元素赋予唯一ID。 然后，函数支持参数，这就是javascript的目的。 传递该参数并使用.style.display元素设置样式。

我们不需要将标签定位为绝对位置，因为它不会挂起。 并且，您可以使用display: inline-block而不是float: left来设置边距。

.web_index div {width: 400px; height: 300px; background: #eee;}
ul li {width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}

您可以通过以下方式重写clicker()脚本：

function clicker(tab){
  document.getElementById("t1").style.display = "none";
  document.getElementById("t2").style.display = "none";
  document.getElementById("t3").style.display = "none";

  document.getElementById("t" + tab).style.display = "block";
}

因此，您可以将DIV标签的ID作为参数传递。 通过修改元素的style属性，可以隐藏或显示。

您可以使用相同的onclick函数在<li>调用此函数，但只需传递另一个额外的参数即可：

<ul>
    <li onclick="clicker(1)">one</li>
    <li onclick="clicker(2)">two</li>
    <li onclick="clicker(3)">three</li>
</ul>

在以下位置查看演示： http : //jsbin.com/welcome/22513