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