0

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

这是在我的 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 文件，但不会复制/粘贴该代码:)

希望你们能帮忙:)

4

5 回答 5

1

试试这个：.siblings()在你的情况下会有用。

$(document).ready(function(){
    var targetElement = $("#mainNavMenu li");           
    targetElement.click(function() {
       $(this).siblings().removeClass("changeColor");
       $(this).addClass("changeColor");
    });
});
于 2013-01-09T12:09:44.747 回答
1

您正在将background: gray样式应用于规则中的<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");
    });
});

看一个活生生的例子。

于 2013-01-09T12:22:38.813 回答
0

这应该这样做..

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

}

因为您正在将类添加到<li>此处...$(this)在您的 jquery 中指的是<li>..

于 2013-01-09T12:09:56.487 回答
0

像这样试试。

$(document).ready(function(){
    var targetElement = $("#mainNavMenu li");
    targetElement.click(function() {
        targetElement.removeClass('changeColor');
        $(this).addClass("changeColor");
    });
});
于 2013-01-09T12:11:10.163 回答
0 
<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 中设置属性包括：::
selection
{
color:#fff;
背景：#ed1e79;
文字阴影：无；
}
::-moz-selection //MOZILA FIREFOX需要这个属性
{
color:#fff;
背景：#ed1e79;
文字阴影：无；
}

我认为这种方法很容易工作，你可以很容易理解


注意事项：当你指示某人时，让指导很容易，最简洁

于 2016-09-08T04:43:23.547 回答