0

私はCSSの人ではありません。メインページの2つのタブにリンクされた2つの部分的なページがあるMVC3アプリを開発しています。タブの背景が選択されている場合は変更したい。助言がありますか？以下のCSSを確認してください。

ul#tabs-nav a:hover,
ul#tabs-nav a:focus {
  border-color: #ddd;
  border-bottom-color: #fff;
  background: #fff;
  text-decoration: none;
  color: #555;
  }

ul#tabs-nav a:selected 
 {
    background:red;
    text-decoration:underline;
 }

HTML

<div>
    <ul id="tabs-nav">
        <li><a href="../Home/Dogs">Dogs</a></li>
        <li><a href="../Home/Cats">Cats</a></li>
    </ul>
    <div class="tabbed-contents">
        @RenderBody()
    </div>
</div>

よろしく

4

2 に答える 2

1

このようなものhttp://jsfiddle.net/KNCH6/ これはせいぜい例です、私はMVC3を知らないので、あなたが望む正確な相互作用はわかりませんが、多分jqueryはタブにクラスを追加するあなたの友達になるでしょうクリックすると。私が持っているフィドルは、アンカーに焦点が合っているときにのみ機能します。したがって、フォーカスがオフになり、エフェクトがオフになる場所でelseをクリックすると、

于 2012-06-01T15:54:08.387 に答える
0

jQuery を使用して、リンクにクラスを追加して強調表示することができます: http://jsfiddle.net/w9UNb/

  $(document).ready(function(){
    $('#tabs-nav a').click(function() {
      $('ul#tabs-nav a').removeClass('selectedLink');
      $(this).addClass('selectedLink');
    });
  });

そして、これをcssに追加します 

 ul#tabs-nav a.selectedLink
 {
    background:red;
    text-decoration:underline;
 }
于 2012-06-01T16:24:28.253 に答える