如何根据主题标签改变主动链接的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; 
}