如何根據主題標籤改變主動鏈接的css

Question

我在這裏有一個情況，關於如何根據主題標籤更改我的主動鏈接CSS。 所有內容都位於同一頁面中，我使用#url部分來調用內容。

我已經嘗試了幾個JavaScript示例和教程，但似乎不工作，所以我決定在這裏創建一個新問題並與我們所有人分享我的代碼。

這裏是在瀏覽器中我的網址顯示：

file:///Users/FZ/Desktop/HLT/services.html#/mergersandacquisitions 
file:///Users/FZ/Desktop/HLT/services.html#/corporatecommercial 

這是側菜單欄的代碼：

<!-- Start side menu bar --> 
<div id="services_menu"> 
<ul id="sliding-navigation"> 
<li class="sliding-element" style="margin-left: 0px;"><h3>Our Services:</h3></li> 
<li class="sliding-element" style="margin-left: 0px;"><a href="#capitalmarket"> 
Capital Market 
</a></li> 
<li class="sliding-element" style="margin-left: 0px;"><a href="#mergersandacquisitions"> 
Mergers & Acquisitions 
</a></li> 
<li class="sliding-element" style="margin-left: 0px;"><a href="#corporatecommercial"> 
Corporate Commercial 
</a></li> 
</ul> 
</div> 
<!-- End side menu bar --> 

，這裏是該鏈接的內容的幾個例子：

<div class="section"> 
<h1 style="margin-top: 0.5px;" id="capitalmarket" >Capital Market </h1> 
<div id="content_services"> 
    <p>We have significant experience advising clients on complex securities law matters.We have advised on domestic and international cross-border transactions including overseas IPOs.</p> 
    <p> 
    We have an award-winning Islamic Finance capability that can structure and execute complex financing deals.We leverage the expertise and experience of our established network to help you achieve your financing objectives from origination to execution.</p> 


    <li>Sukuks</li> 
    <li>Structured Finance</li> 
    <li>Take-overs</li> 
    <li>Underwriting Agreements</li> 
    <li>Warrants</li> 
</div> 
</div> 



<div class="section"> 
<h1 id="mergersandacquisitions" ><br><br><br><br><br>Mergers & Acquisitions</h1><br> 
<div id="content_services"> 
    <p>We advise on the full range of merger and acquisition transactions involving domestic and international businesses at all stages of development.</p> 

    <p>Our clients range from private companies to public listed companies and multinationals.Where a capital markets angle is involved, we tap on the resources of our Capital Markets team to ensure you cross the finish line.</p> 

    <li>Capital Restructuring</li> 
    <li>Commercial Transactions</li> 
    <li>Consultancy</li> 
    <li>Corporate Compliance</li> 
    <li>Corporate Reorganisations</li> 
    <li>Due Diligence</li> 
    <li>Joint Venture</li> 
    <li>Privatisations</li> 
    <li>Private Equity & Venture Capital</li> 
    <li>Share & Business Acquisitions</li> 
    <li>Take-overs</li> 
</div> 
</div> 

這裏是CSS：

/*/*Navigation menu services*/ 
h3{ 
    font-family: futura; 
} 
#navigation-block { 
    position:relative; 
    top:200px; 
    left:200px; 
    font-family: "Lucida Grande", Verdana, sans-serif; 
} 

#hide { 
    position:absolute; 
    top:30px; 
    left:-190px; 
} 

ul#sliding-navigation 
{ 
    list-style: none; 
    font-size: .75em; 
    margin: 30px 0; 
    padding: 0; 
} 

ul#sliding-navigation li.sliding-element h3, 
ul#sliding-navigation li.sliding-element a 
{ 
    display: block; 
    width: 150px; 
    padding: 5px 18px; 
    margin: 0; 
    margin-bottom: 5px; 
} 

ul#sliding-navigation li.sliding-element h3 
{ 
    color: #fff; 
    background:#333 repeat-y; 
    font-weight: normal; 
} 

ul#sliding-navigation li.sliding-element a 
{ 
    color: #999; 
    background:#222 repeat-y; 
    border: 1px solid #1a1a1a; 
    text-decoration: none; 
    font-family: futura; 
} 

ul#sliding-navigation li.sliding-element a:hover { color: #BBA842; } 

我該怎麼做才能改變每個#link的活動鏈接。例如，當我點擊合併&購置時，只有「合併&收購」鏈接具有活動顏色，而不是所有鏈接顏色。

我也嘗試創建類似於：active，但不工作的東西。

ul#sliding-navigation li.sliding-element a:active { color: #BBA842; } 

請有人有一個想法分享和幫助我。 謝謝

---

P/S： antindexer正好解決了我的問題。所以我補充說明的是：在style.css中 ，我補充一下：

li.active a 
{ 
    color: #BBA842!important; 

和HTML文件。我添加了javascript

<script> 
$(document).ready(function(){ 
    $('div#services_menu li').click(
     function(e) 
     { 
      $('div#services_menu li').removeClass('active'); 
      $(e.currentTarget).addClass('active'); 
     } 
    ); 
}); 
</script> 

Answer 1

我可以建議使用jQuery。類似於this。

$(document).ready(function(){ 
$('div#services_menu li').click(
    function(e) 
    { 
     $('div#services_menu li').removeClass('active'); 
     $(e.currentTarget).addClass('active'); 
    } 
); 
}); 


li.active a 
{ 
    color: #BBA842!important; 
} 

因爲，首先你使用錨鏈接，並且你想使它成爲動態的。如果任何其他人可以使用CSS來建議解決方案，我會很感激這個答案。

Answer 2

jQuery(function() { 
     jQuery('a').each(function() { 
     if (jQuery(this).attr('href') === window.location.href) { 
      jQuery(this).addClass('active'); 
     } 
     }); 
    }); 

.active { 
    color: #BBA842!important; 
}