when click on the first li, it show content one, when click on second li, it shows content two
<pre><code>&lt;style type="text/css"&gt;

.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;}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function licker(){
var lier=document.getElementsByTagName("li");
var diver=document.getElementsByClassName("web_index")[0].getElementsByTagName("div");
for(var i=0;i&lt;lier.length;i++)
    { 
        for(j=0;j&lt;diver.length;j++)
        {
            if(i==j)
            {
             diver[j].style.display=block;
                }
            else{
                diver[j].style.display=none;
                }   
            }
    }
}

&lt;/script&gt;
</code></pre>

<p>html:</p>

<pre><code>&lt;ul&gt;
    &lt;li onclick="licker()" class="li01"&gt;the first li&lt;/li&gt;
    &lt;li onclick="licker()" class="li02"&gt;the second li&lt;/li&gt;
    &lt;li onclick="licker()" class="li03"&gt;the third li&lt;/li&gt;
    &lt;div class="web_clear"&gt;&lt;/div&gt;
&lt;/ul&gt;
&lt;div class="web_index"&gt;
&lt;div style="display:block" &gt;content one&lt;/div&gt;
&lt;div style="display:none"&gt;content two&lt;/div&gt;
&lt;div style="display:none"&gt;content three&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>when click on the first li, it show content one, the others are all hidden, when click on second li, it shows content two. the others are all hidden....why my code doesn't work.how to correct it.thank you,</p>
