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:linkchangeColor<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 に答える