CSS - 突出显示选定的选项卡

我的母版页中有以下选项卡式导航设置。CSS - 突出显示选定的选项卡

 <nav class="grid_12"> 
      <ul> 
       <li><a href="#" class="selected">Home</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </nav>

当我点击组合选项卡上，例如，我想投资组合选项卡以保持突显了我的土地投资组合页面上。完成此操作的建议方法是什么？

我检查了一些其他帖子，但the most relevant这些使用div的例子中，而不是单独的页面。

来源

2012-04-23 MissPiplup

假设您选择的“所选”类名具有您所谈论的突出显示的样式。用户点击其中一个链接后，用jquery，你可以添加“选择”类到单击的锚标签。把它放在关闭body标签之前或者在你的主JavaScript文件中。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".grid_12 ul li a").click(function() { 
      $(".grid_12 ul li a ").removeClass("selected"); 
      $(this).addClass("selected") 
     }) 
    }) 
</script>

上面的代码，如果没有刷新页面，只有内容的刷新，但是如果你的页面将会刷新，并转到了新的一页，我会做这样的事情只会工作：

<nav class="grid_12"> 
    <ul> 
     <li><a href="#" class="nav_home">Home</a></li> 
     <li><a href="#" class="nav_portfolio">Portfolio</a></li> 
     <li><a href="#" class="nav_blog">Blog</a></li> 
     <li><a href="#" class="nav_contact">Contact</a></li> 
    </ul> 
</nav>

并添加特定页面的样式。例如，当你在www.mySite.com/portfolio在CSS的组合只添加：

a.nav_portfolio{ 
    background-color:orage; 
    ... 
}

这种方式，你甚至不用做任何的JavaScript。

来源

2012-04-23 23:25:18 Sammy

我刚试过这个，但没有这样的运气。我把你的代码放在head标签中。这是否必须在我将要使用的所有ASPX页面中实现，还是要在Master页面中实现它就足够了？ – MissPiplup 2012-04-23 23:39:16

将它放在页面底部，正好在关闭标记之前。这里是整个代码： – Sammy 2012-04-23 23:42:05

谢谢萨米，它完美的工作。 – MissPiplup 2012-04-23 23:49:07

CSS - 突出显示选定的选项卡

回答

相关问题