0

それぞれにアンカータグが付いたulliによって作成されたメニューがあります。Cssはアンカーとanchor：hoverに適用されますが、選択したアイテムに、背景を別の色に変更して選択されていることを示したいと思います。アンカー：アクティブは機能しません。

javascriptを試していますが、まだ成功していません。これはcssを介して実行できますか？私は非常に多くの例を見てきましたが、実際にはどれも正しく機能しませんでした。

JAVASCRIPT

 <script type="text/javascript">
      function ChangeColor(obj) {
         var li = document.getElementById(obj.id);
         li.style.background = "#bfcbd6";
      }
 </script>

HTML

 <div id="navigation">
      <ul>
          <li><a onclick="changecolor(this);" href="Default.aspx">Home</a></li>
          <li><a onclick="changecolor(this);" href="View.aspx">View</a></li>
          <li><a onclick="changecolor(this);" href="About.aspx">About</a></li>
      </ul>
  </div>

CSS-簡略化

#navigation ul {
  list-style-type: none;
}

#navigation li 
{
  float: left;
}

#navigation a
{
  background-color: #465c71;
}

#navigation a:hover
{
  background-color: #bfcbd6;
}
4

2 に答える 2

2

要素を処理するためにIDを再度取得する必要はありません。objは実際の要素を参照します。

 <script type="text/javascript">
      function ChangeColor(obj) {
         obj.style.backgroundColor = "#bfcbd6";
      }
 </script>

編集：そしてjavaScript is case sensitive、あなたはあなたの関数名をチェックするべきです。

これがjsFiddleデモです

于 2012-10-17T18:22:31.927 に答える
0

この状況を解決するためにJavaScriptを使用する方法を見つけました。これはMasterPageを持つために機能します。選択したタブのIDを変更すると、他のタブのIDをnullに設定している間のみ、その選択したタブのcssが参照されます。

HTML

<div id="navbar">
    <div id="holder">
        <ul id="menulist">
            <li><a onclick="SelectedTab(this);" href="#" id="onlink" >Home</a></li>
            <li><a onclick="SelectedTab(this);" href="#" id="" >Products</a></li>
            <li><a onclick="SelectedTab(this);" href="#" id="">Services</a></li>
            <li><a onclick="SelectedTab(this);" href="#" id="">Gallery</a></li>
            <li><a onclick="SelectedTab(this);" href="#" id="" >Contact</a></li>
        </ul>
    </div>
</div>

JavaScript

    function SelectedTab(sender) {
        var aElements = sender.parentNode.parentNode.getElementsByTagName("a");     
        var aElementsLength = aElements.length;      
        var index;     
        for (var i = 0; i < aElementsLength; i++)     
        {
            if (aElements[i] == sender) //this condition is never true         
            {
                index = i;
                aElements[i].id="onlink"
            } else {
                aElements[i].id=""
            }   
        } 
    }

タブが選択された後に背景色を変更するためのCSS

#holder ul li a#onlink
{
   background: #FFF;
   color: #000;
   border-bottom: 1px solid #FFF;
}
于 2012-10-18T18:45:52.473 に答える