Jquery菜單a：點擊鏈接時改變顏色

我想讓一些代碼讓我能夠點擊我的導航線上的鏈接，然後它會改變顏色，當我點擊另一個鏈接時顏色會變回來新的鏈接將獲得顏色！然而事情似乎是錯我的代碼;（誰能幫我:)Jquery菜單a：點擊鏈接時改變顏色

這是我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文件，但不會再複製/粘貼日在代碼:)

希望能跟大家能幫助:)

來源

2013-01-09 user1958149

試試這個：.siblings()會在你的情況是有用的。

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

來源

2013-01-09 12:09:44 Jai

嘛，他說我是不是要去副本粘貼代碼：答案爲D + 1。 –

這應該做到這一點..

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

}

，因爲你要添加的類<li>這裏... $(this)在你的jQuery是指<li> ..

來源

2013-01-09 12:09:56 bipen

像這樣嘗試。

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

來源

2013-01-09 12:11:10 Vins

您在#mainNavMenu ul li a:link規則應用background: gray風格的<a/>超鏈接。但是，您正在將changeColor類名應用於父元素<li/>。

應用於<li/>的background風格將由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"); 
    }); 
});

See a live example.

來源

2013-01-09 12:22:38 Alexander

<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;
text-shadow：none;
}
:: - MOZ選擇//此屬性需要MOZILA FIREFOX
{
顏色：#FFF;
背景：＃ed1e79;
text-shadow：none;
}

我認爲一個方法非常簡單的工作，你可以很容易理解

注意：當您指示有人讓爲導向很容易和最簡潔的

來源

2016-09-08 04:43:23

Jquery菜單a：點擊鏈接時改變顏色

回答

相關問題