0

私は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すべてのコンテンツが非表示になっています。2つが表示されcontent twoます...

4

1 に答える 1

0

タブの実装に関する質問については、より良い方法で行うことをお勧めします。同じクリッカー関数は の引数を取ることがIDできDIV、呼び出すときに渡すことができます。

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

IDそのため、DIVタグの をパラメーターとして渡すことができます。要素のプロパティを変更するstyleことで、表示または非表示にすることができます。

<li>同じ関数を使用してこれを呼び出すことができますが、onclick別の追加パラメーターを渡すだけです。

<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

于 2012-09-13T09:17:19.357 に答える