Question

我有以下三个项目并排显示：

<div class="page-header">
    <h1 style="line-height:0">Title</h1>
        <ul style="float: right; list-style-type: none;">
    <li><a href="http://test1.com">T1</a></li>
    <li><a href="http://test2.com">T2</a></li>
    <li><a href="#">T3</a></li>
        </ul>
</div>

我想在用户点击它时突出显示该项目（例如T1）。类似于stackoverflow的问题，如问题，标签，用户等等。

Answer 1

检查出来：

// Start up jQuery
$(document).ready(function() {
  $('a.nav').click(function(e) {
    e.preventDefault();
    
    $('a.nav').removeClass('current_page');
    
    // Do an ajax call instead
    $('#response').html($(this).attr("href"));

    $(this).addClass('current_page');
  });
});

* {
  font-family: Verdana;
  font-size: 13px;
}
div#wrapper {
  margin: 20px;
}
.current_page {
  color: red;
  font-weight: bold;
  text-decoration: none;
}
#response {
  width: 300px;
  height: 200px;
  padding: 5px;
  border: 1px dotted #777;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <a class="nav" href="http://www.google.com">Google</a> |
  <a class="nav" href="http://www.facebook.com">Facebook</a> |
  <a class="nav" href="http://www.stackoverflow.com">Stackoverflow</a> |
  <a class="nav" href="http://www.myspace.com">Myspace</a> |
  <a class="nav" href="http://www.craigslist.com">Craigslist</a>

  <p>&nbsp;</p>
  <p>Response:</p>

  <div id="response"></div>
</div>

基本上，它将类.current_page推送到激活的锚标记，该标记在DOM中打印MEMORY ID。然后，您将实现ajax调用以在页面中注入内容。

Answer 2

诀窍是让一个类显示与锚点:hover伪造元素相同的样式。没有办法只使用html和css突出显示当前活动选项卡;代码将是必要的，以确定当前活动的页面（或类必须手动编码到每个页面），因为一旦加载下一页，它就无法记住最后点击的内容。

Stackoverflow实际上在该菜单的li标签上添加了一个名为youarehere的类。

喜欢这段代码：

CSS：

#nav ul li {
   background: grey;
   color: white;
}
#nav ul li:hover {
   background: orange;
}
#nav ul li.youarehere {
   background: orange;
}

HTML

<div id="nav">
    <ul>
        <li class="youarehere"><a href="index.php">Home</a></li>
        <li><a href="blog.php">Blog</a></li>
    </ul>
</div>

jsFiddle here (like SO)

突出显示锚元素

2 个答案:

CSS：

HTML