javascript tab doesn't work?

Question

i am a new learner of javascript. so the first i don't want to use jquery to get the tab. the following is my code. but it doesn't work.how to correct my code. thank you.

.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>

i want to when click one then show content one .all the content are hidden. two then show content two ...

Answer 1

See, for your question of implementing tabs, I can suggest you to do in a better way. The same clicker function can take an argument of the ID of the DIV and you can pass it when you are calling it.

<!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>

Working

Instead of finding the index of the element occurrence, we can give a Unique ID to each. Then, functions support arguments, and that is what javascripts are for. Pass that argument and set the style using .style.display of the element.

We don't need to position the tabs as absolute, because it is not going to be hanging. And, you can set the margins using display: inline-block instead of 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;}

You can rewrite the clicker() script this way:

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";
}

So that, you can pass the ID of the DIV tag as a parameter. By modifying the style properties of the element, you can either hide or show.

You can call this in the <li> using the same onclick function but just passing another extra parameter:

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

Check out demo at: http://jsbin.com/welcome/22513