Question

我有一个无序链接列表。我想要的是让点击的活动链接将颜色更改为例如红色。所有其他链接应该是棕色。

当点击另一个链接时，之前单击的链接应为棕色，活动红色为红色。我已经设法用Jquery做了一些事情，但问题是即使我得到了我想要的东西，点击时的链接也不会导航到所请求的页面。

示例代码如下：

＆＃13;

$(document).ready(function() {
            $('.list li a').click(function() {
                     $('.list li a').css('color', '#888');
                     $(this).css('color', '#678DBC');
                     return false;   
                     
                     $(this).css('color', '#678DBC');
                });
        });

＆＃13;

<ul class="list">
      <li><a href="http://www.google.com">Google</a></li>
      <li><a href="http://www.microsoft.com">Microsoft</a></li>
</ul>

＆＃13;

我已经尝试过这些解决方案，即使它在jsfiddle上工作，我的页面（一个asp.net mvc页面）也没有用....

我有html代码的输出（来自我的asp.net mvc页面）+ css规则+ jsfiddle中的jquery代码 - http://jsfiddle.net/jLo2uesa/

我的网页是http://geroshop.devtool.gr/%CE%B8%CE%AD%CF%81%CE%BC%CE%B1%CE%BD%CF%83%CE%B7-%CF%88%CF%8D%CE%BE%CE%B7-%CE%BF%CF%81%CE%BF%CF%86%CE%AE%CF%82

链接在左边（在希腊语中，但不是问题）。当点击时我想要例如变为红色而其余所有都变为灰色。然后，如果点击另一个是灰色但是clicked.it不起作用....

请在上面的页面上做一个页面源视图，看看jquery和html是否正确...我已经将css规则.active {color：red;}添加到网站的styles.css文件中

感谢

Answer 1

您需要删除

return false;

它可以防止冒泡和锚点的默认事件。我不确定你为什么需要它。

$('.list li a').click(function() {
    $('.list li a').css('color', '#888');
    $(this).css('color', '#678DBC');
    $(this).css('color', '#678DBC');
});

Answer 2

<ul id="myList" class="list">
    <li><a target="_blank" href="http://google.com">Google</a></li> 
    <li><a target="_blank" href="www.microsoft.de">Microsoft</a></li>    
</ul>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#myList").find("a").click(function(e){
        $("#myList").find("a").removeClass("active");
        $(e.target).addClass("active");
    });
});
</script>

您只需要为名为“active”的链接声明一个具有所需样式的css类。

更改活动链接的颜色，并为其他链接保留不同的颜色

2 个答案: