Question

我不是一个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>

此致

Answer 1

像这样http://jsfiddle.net/KNCH6/ 这是一个充其量的例子，我不知道MVC3所以我不确定你想要的确切交互，但也许jquery将是你的朋友在点击时向标签添加类。我只能在锚点聚焦时起作用。因此，如果您单击其他焦点将关闭的位置，效果将关闭。

Answer 2

您可以使用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;
 }

css没有使用标签

2 个答案: