嵌套div时突出显示当前页面选项卡
嵌套div时突出显示当前页面选项卡
提问于 2012-08-12 02:28:16
我需要使用jquery突出显示当前页面的选项卡。一个简单的任务，通常只需要几行我知道的代码。然而，标签不是你通常的事情，因为我有一个工具栏，并已与跨度它。选项卡的跨度位于链接内，因此可以单击选项卡以及其中的文本。因为工具栏上只有两个选项卡是链接，所以我想在jquery中使用if else语句来确定用户在哪个页面上，从而确定要突出显示哪个选项卡，但我不太确定如何做到这一点。
标签的标记是；
<a href="Home">
<span class="navButton" title="Return Home">
Home
</span>
</a>
<a href="Discover">
<span class="navButton" title="Discover The Unsigned">
Discover
</span>
</a>我目前使用的jquery不起作用的是；
$(function(){
var path = location.pathname.substring(1);
if ( path )
$('#navButton a[href$="' + path + '"]').css ('box-shadow', 'inset 0 0 10px #000000');
});注意:我将添加css样式而不是类，因为它将使其他事情变得更简单。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-08-12 02:44:59
为什么你不想改变风格onClick()呢？就像这样：
$("#navButton a").click(function() {
$(this).css('box-shadow', 'inset 0 0 10px #000000');
});或者更好的是，你可以创建CSS类：
.activeTab {box-shadow: inset 0 0 10px #000000;}然后添加/删除它，具体取决于当前活动的选项卡：
$("#navButton a").click(function() {
$(".activeTab").removeClass("activeTab");
$(this).addClass("activeTab");
});基于位置：
$(function() {
var url = window.location.path;
$('$navButton a[href="' + url + '"]').addClass("activeTab");
});然后你的链接应该看起来像这样：
<a href="'/someDirectory/one.html'">One</a>
<a href="'/someDirectory/two.html'">Two</a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11916557
复制相关文章
相似问题
腾讯云开发者
