0

我不是一个 CSS 人。我正在开发一个 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 将是你添加类到选项卡的朋友点击时。我的小提琴只有在锚点聚焦时才有效。因此，如果您单击其他焦点将关闭的位置，效果将关闭。

于 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 回答