0

新しいページをロードする代わりにdivを表示/非表示にするJavascriptタブがあります。タブには、ホバー効果を与えるスタイルがあります。現在表示されているdivに一致するアクティブなスタイルを追加したいと思います。

ページをロードするバージョンからそのままでは機能しないJAVASCRIPT：

function setActive() {
  aObj = document.getElementById('nav').getElementsByTagName('a');
  for(i=0;i < aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href) >= 0) {
      aObj[i].className='active';
    }
  }
}

function showdiv(id){
document.getElementById(id).style.display = "block";
}

function hidediv(id){
document.getElementById(id).style.display = "none";
}

スタイル：

#pageAdmin { display:block; }
#userAdmin { display:none; }

HTML：

<ul id="nav">
    <li><a onclick="showdiv('pageAdmin'); hidediv('userAdmin')" 
          href="#">Page Admin</a></li>
    <li><a onclick="showdiv('userAdmin'); hidediv('pageAdmin')" 
          href="#">User Admin</a></li>
</ul>


<div id="pageAdmin">
    <h1>Page admin</h1>
</div>

<div id="userAdmin">
    <h1>User admin</h1>
</div>

これはSOに関する私の最初の質問なので、適切であることを願っています。そうでない場合は、事前に謝罪を受け入れてください。

4

1 に答える 1

0

あなたの setActive 関数はあまり役に立ちません。そして、場所、href、およびハッシュを使用すると、やりたいことが難しくなります。

スクリプトを次のように変更できます

function showdiv(id){
  var el = document.getElementById(id);
  el.style.display = "block";
  el.className = "active";
}

function hidediv(id){
  var el = document.getElementById(id);
  el.style.display = "none";
  el.className = "";
}

今、それはあなたが望むことをするはずです。

ただし、 jQueryを確認する必要があります。jQuery を使用すると、getElementById の使用が不要になり、バニラ js を使用する場合と同様に、onclick のイベント ハンドラを簡単にアタッチできます。html 属性でハンドラーを設定することは悪い習慣と見なされます。複数のスタイルを使用する場合、jQuery はスペースで区切られた className 文字列の分割と結合も処理します。

jQuery を使用すると、次のようになります。

$("a", "#nav").click(function () {
  var $navA = $(this);
  var tabName = $navA.attr("data-tabName");

  $(".tab").each(function () {
    var $tab = $(this);
    if ($tab.attr("id") === tabName) {
      $tab.css({ display: 'block' }); // you may move this into active style
      $tab.addClass("active");
      $tab.removeClass("inactive");
    }
    else {
      $tab.css({ display: 'none' }); // you may move this into inactive style
      $tab.removeClass("active");
      $tab.addClass("inactive");
    }
  });
});

jQuery の例の HTML

<ul id="nav">
    <li><a data-tabName="pageAdmin" href="#">Page Admin</a></li>
    <li><a data-tabName="userAdmin" href="#">User Admin</a></li>
</ul>

<div class="tab" id="pageAdmin">
    <h1>Page admin</h1>
</div>
<div class="tab" id="userAdmin">
    <h1>User admin</h1>
</div>
于 2012-07-11T13:19:08.537 に答える