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样式应用于<a/>规则中的#mainNavMenu ul li a:link超链接。但是，您正在将changeColor类名应用于父<li/>元素。

应用于background的{{1}}样式将被<li/>中的background样式覆盖，该样式始终以<a/>结尾。

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

使用

gray

而不是

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

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

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

See a live example.

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 个答案: