0 
<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>
<script type="text/javascript">
function licker(){
var lier=document.getElementsByTagName("li");
var diver=document.getElementsByClassName("web_index")[0].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>

html:

<ul>
    <li onclick="licker()" class="li01">the first li</li>
    <li onclick="licker()" class="li02">the second li</li>
    <li onclick="licker()" class="li03">the third li</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>

最初のliをクリックするとコンテンツ1が表示され、他のものはすべて非表示になり、2番目のliをクリックするとコンテンツ2が表示されます。他のものはすべて隠されています....なぜ私のコードが機能しないのですか.どうすれば修正できますか.ありがとう,

4

2 に答える 2

1

にインデックスを割り当てる必要がありますli。

<ul>
    <li onclick="licker(0)" class="li01">the first li</li>
    <li onclick="licker(1)" class="li02">the second li</li>
    <li onclick="licker(2)" class="li03">the third li</li>
    <div class="web_clear"></div>
</ul>

とあなたの機能：

function licker(id){
    var diver=document.getElementsByClassName("web_index")[0].getElementsByTagName("div");
    for(var i=0;i<diver.length;i++){ 
        if(i==id){
            diver[i].style.display='block';
        } else {
            diver[i].style.display='none';
        }   
    }
}​

JSFiddleの例

于 2012-09-14T07:38:39.860 に答える
1

これを試して

<ul>
   <li onclick="licker(this);">the first li</li>
   <li onclick="licker(this);">the second li</li>
   <li onclick="licker(this);">the third li</li>
</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>


function licker(sender) {
    var lier = document.getElementsByTagName("li");
    var diver = document.getElementsByClassName("web_index")[0].getElementsByTagName("div");
    for (var i = 0; i < lier.length; i++) {
       if (lier[i] != sender) continue;
       for (j = 0; j < diver.length; j++) {
          if (i == j)
             diver[j].style.display = 'block';
          else 
              diver[j].style.display = 'none';

          }
       }
    }
</script>
于 2012-09-14T07:47:44.140 に答える