如何使一個菜單鏈接使用javascript/jQuery活動？

我有一個共同的頭文件中的靜態菜單。無論何時通過點擊菜單中的鏈接訪問任何頁面，我都需要將該點擊鏈接上的圖像作爲激活鏈接的指示符。如何使一個菜單鏈接使用javascript/jQuery活動？

下面

是菜單的HTML我使用

<ul id="in-menu"> 
    <li><a href="unleashing-your-heart" >home</a></li> 
    <li><a href="fromdaniella" >from Daniella</a></li> 
    <li><a href="material-list" >material list</a></li> 
    <li><a href="program" >program</a></li> 
    <li><a href="testimonials-2" >testimonials</a></li> 
    <li><a href="#">login</a></li> 
</ul>

如何使用jQuery或JavaScript，使所需的功能工作？

來源

2011-06-09 OM The Eternity

你並不需要使用Javascript/jQuery的這個

你可以做的就是給每個頁面的<body>元素或主容器div一個唯一的ID或類近的HTML的頂部某處結構無論如何..然後給你的菜單中的每個鏈接一個唯一的ID或類（如果使用類，他們可以是相同的第一個）

<body class="nm-unl"> 
    <ul id="in-menu"> 
    <li class="nm-unl"><a href="unleashing-your-heart" >home</a></li> 
    <li class="nm-dan"><a href="fromdaniella" >from Daniella</a></li> 
    <li class="nm-mat"><a href="material-list" >material list</a></li> 
    <li class="nm-pro"><a href="program" >program</a></li> 
    <li class="nm-tes"><a href="testimonials-2" >testimonials</a></li> 
    <li class="nm-log"><a href="#">login</a></li> 
    </ul> 
</body>

所以，你的主頁上body類可能是nm-unl和登錄頁面將有nm-logbody類等。菜單本身永遠不會改變，因此仍然可以在一個共同文件

然後在每一個環節都進行專門針對CSS的..所以說，你的普通鏈接沒有圖像，但:hover和你的「當前」的網頁做

#in-menu a {background: none;} 

#in-menu a:hover {background: url(image.png) no-repeat top center;}

，那麼你會組新的/特定的選擇器進入懸停規則選擇器，那些規則則比普通的規則更具體，並且它們也將只適用於你的「當前頁面鏈接」，即當兩個頁面在頁面上相同時

.nm-log #in-menu .nm-log a, 
.nm-tes #in-menu .nm-tes a, 
.nm-pro #in-menu .nm-pro a, 
.nm-mat #in-menu .nm-mat a, 
.nm-dan #in-menu .nm-dan a, 
.nm-unl #in-menu .nm-unl a, 
#in-menu a:hover {background: url(image.png) no-repeat top center;}

你仍然需要#in-menu ID的選擇以及兩個班，因爲否則的選擇將不會有足夠的重量，以覆蓋默認規則

一個jQuery的解決方案會以類似的方式工作，邏輯將是相同的。您仍然需要一個唯一的頁面指示符，即一個主體類或ID，然後您將檢查主體ID /類並將當前類添加到相關的匹配鏈接。

來源

2011-06-09 07:21:20 clairesuzy

這是一個基於jQuery的解決方案：

1）確定每一頁一些如何

2）比賽反對您的菜單項ID

3）更改CSS相應

<script> 
    pageID = $('#pageID').val(); 
    $("li").each(function(index) { 
     listItemText = $(this).html(); 
     listItemText = listItemText.toLowerCase(); 

     if(listItemText == pageID) 
      { 
       $(this).css('color','red'); 
      } 
    }); 
</script> 

<style> 
    li{ 
     color:green; 
    } 
</style> 

<input type="hidden" id="pageID" value="contact" /> 

<ul> 
    <li>Home</li> 
    <li>About</li> 
    <li>Portfolio</li> 
    <li>Contact</li> 
</ul>

http://jsfiddle.net/CnEsF/

有很多做每一個這些步驟的方式，因此我的答案的風格。每一步都可以不同的方式執行。如果頁面可能涉及使用隱藏的輸入或其他DOM元素，或者解析URL。匹配會要求你標準化你的腳本，這樣你的條件不會失敗......我使用了小寫方法，但還有其他方法。最後，可以通過分配一個已經具有樣式的新類，使用jquery修改DOM，甚至在使用PHP構建頁面時分配正確的類來完成更改CSS。

希望這可以幫助

來源

2013-01-16 20:45:10 illathruz

如何使一個菜單鏈接使用javascript/jQuery活動？

回答

相關問題