0

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

我现在终于设法在 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>

哦，问题是，虽然在你点击一个链接时它会以绿色突出显示并带有白色文本，直到你在浏览器中预览时点击另一个链接，这不会发生。

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

4

3 回答 3

2

<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');
    });
});
于 2013-06-05T17:44:27.833 回答
0

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

<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 a 之前添加 #nav_bar 似乎已经解决了问题

于 2013-06-05T18:12:30.897 回答
0

由于您没有收到任何 js 错误，因此您的 css.current类规则似乎不如其他一些 css 规则重要。为了使其生效，请!important在 css 值后面添加，例如

.current p{
    color: white!important;
    background-color:#2d7a78!important;
}
于 2013-06-05T18:09:19.333 回答