Question

我一直在努力制作一个导航栏，将某些样式应用于当前正在使用的链接（因此，如果您在'about'页面上，'about'链接的样式与其他链接的样式不同）。

我终于设法在jsfiddle中执行此操作，但是当我在文本编辑器中应用相同的代码然后在浏览器中预览文件时，相关效果不起作用，即使它在JSfiddle中也是如此。

我做了一些研究，但无法找到原因，我不认为我在任何地方都有任何不可见的字符，而且我把小提琴设置为“没有包裹在头部”并在脚本中包含一个文档就绪命令但仍然没有。

如果有人可以看看并提供一些非常值得赞赏的建议，这让我疯了！

小提琴在这里：http://jsfiddle.net/smokescreen/jkLam/

这是我的脚本代码：

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

哦，问题在于，虽然在点击链接时小提琴会突出显示为带有白色文本的绿色，直到您在浏览器中预览时再单击另一个链接，这不会发生。

悬停效果仍然有效，因此链接会在悬停时显示绿色和白色文本，但即使单击鼠标移开后链接也会恢复到原始状态，即使已单击，现在应为绿色和白色文字？！

Answer 1

在<head>元素中添加此内容：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

更新尝试使用类：

从元素中删除该类

$(document).ready(function() {
    $('li a').on('click', function(e){
        $('.current').removeClass('current');
        $(this).addClass('current');
    });
});

Answer 2

由于您没有收到任何js错误，因此.current类的css规则似乎不如某些其他css规则重要。为了起作用，请在{/ p>之类的css值后添加!important

.current p{
    color: white!important;
    background-color:#2d7a78!important;
}

Answer 3

好的家伙感谢您的帮助，我不确定谁的答案有所帮助，因为我有点困惑但它现在可以使用以下代码（我会回去勾选谁的答案最终帮助最多 - 但多亏了所有你的帮助，这个网站上的人真的很棒！）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('#nav_bar ul li a').click(function(e)     
{$('a').removeClass('current');$(this).addClass('current');});});


</script>

对于那些希望了解解决方案的人，我认为我需要引用列表中的div而不仅仅是列表，因此在ul li之前添加#nav_bar似乎已经解决了问题

代码在jsfiddle中工作，但在浏览器中预览时却没有

3 个答案: