Jquery菜单a：单击时链接更改颜色

Question

我正在尝试制作一些代码，使我能够点击导航线上的链接，然后它将改变颜色，当我点击另一个链接时，颜色将改变回来，新的链接将获得颜色！ 但是我的代码似乎有些问题;（任何人都可以帮助我吗？:)

这是在我的try_1.php文件中：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />

        <link rel="stylesheet" href="try_1.css">
        <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/click.js"></script>
</head>
    <body>
        <div id="header">
        <div id="mainNavMenu">
            <ul>
                <li><a href="#">Hjem</a></li>
                <li><a href="#">CV</a></li>
                <li><a href="#">Foto album</a></li>
                <li><a href="#">Pr&aelig;diker</a></li>
                <li><a href="#">Artikler</a></li>
                <li><a href="#">Foredrag</a></li>
                <li><a href="#">Kalender</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </div>
        </div>
    </body>
</html>

这是在我的try_1.css文件中：

a:link,a:visited{
    color:green;
    font-family:calibri;
    text-decoration:none;
}
#mainNavMenu ul li {
    float:left;
    list-style-type:none;
}
#mainNavMenu ul li a:link{
    color:blue;
    font-size:18px;
    padding-right:20px;
    padding-left:20px;
    line-height:60px;'
    text-decoration:none;
    display:block;
    background:gray;
}
#mainNavMenu ul li a:hover{
    color:yellow;
}

#mainNavMenu .changeColor{
    background-color:white;
}

这是在我的click.js文件中：

$(document).ready(function(){

                var targetElement = $("#mainNavMenu li");

                targetElement.click(function() {
                    $(this).addClass("changeColor");
                });

            });

当然我也有一个jquery.js文件，但不会复制/粘贴该代码:)

希望你们帮忙:)

Answer 1

试试这个： .siblings()对你的情况很有用。

$(document).ready(function(){
    var targetElement = $("#mainNavMenu li");           
    targetElement.click(function() {
       $(this).siblings().removeClass("changeColor");
       $(this).addClass("changeColor");
    });
});

Answer 2

您正在将background: gray样式应用于#mainNavMenu ul li a:link规则中的<a/>超#mainNavMenu ul li a:link 。 但是，您将changeColor类名应用于父<li/>元素。

的background施加到样式<li/>将由被覆盖background在子样式<a/>总是在结束了gray 。

您需要将规则应用于超链接。 以下规则有点过于冗长，但我认为它可以通过。

采用

#mainNavMenu ul li a:link.changeColor {
  background-color:white;
}

代替

#mainNavMenu .changeColor{
    background-color:white;
}

并在代码中更新当前选择器。

$(function(){
    var $targetElement = $("#mainNavMenu li a");           
    $targetElement.click(function() {
       $targetElement.removeClass("changeColor");
       $(this).addClass("changeColor");
    });
});

查看实时示例。

Answer 3

这应该做..

#mainNavMenu ul li.changeColor{
background-color:white;

}

因为你正在将这个类添加到<li>这里... $(this)在你的jquery中引用<li> ..

Answer 4

试试这样吧。

$(document).ready(function(){
    var targetElement = $("#mainNavMenu li");
    targetElement.click(function() {
        targetElement.removeClass('changeColor');
        $(this).addClass("changeColor");
    });
});

Answer 5

<script  type="text/javascript">
    $(document).ready(function () {
        jQuery('.menu a').click(function () {.  
            jQuery('.menu a').removeClass('select');
            jQuery(this).addClass('select');

        });
    });

</script>
<nav class="menu">
    <a href="#" class="select">all</a>
    <a href="#" ">shoes</a>
    <a href="#" ">dress</a>
    <a href="#" ">hat</a>
    <a href="#" ">trousers</a>
    <a href="#" ">shirt</a>

</nav>

记住：在CSS中设置属性包括：
::选择
{
颜色：#FFF;
背景：＃ed1e79;
文字阴影：无;
}
:: - moz-selection //这个属性需要MOZILA FIREFOX
{
颜色：#FFF;
背景：＃ed1e79;
文字阴影：无;
}

我认为这种方法非常容易，您可以轻松理解

注意：当你指导某人时，让我们轻松，最简洁

Jquery菜单a：单击时链接更改颜色

问题描述

5 个解决方案

解决方案1
1 2013-01-09 12:09:44

解决方案2
1 2013-01-09 12:22:38

解决方案3
0 2013-01-09 12:09:56

解决方案4
0 2013-01-09 12:11:10

解决方案5
0 2016-09-08 04:43:23

Jquery菜单a：单击时链接更改颜色

问题描述

5 个解决方案

解决方案1 1 2013-01-09 12:09:44

解决方案2 1 2013-01-09 12:22:38

解决方案3 0 2013-01-09 12:09:56

解决方案4 0 2013-01-09 12:11:10

解决方案5 0 2016-09-08 04:43:23

解决方案1
1 2013-01-09 12:09:44

解决方案2
1 2013-01-09 12:22:38

解决方案3
0 2013-01-09 12:09:56

解决方案4
0 2013-01-09 12:11:10

解决方案5
0 2016-09-08 04:43:23