javascript 如何根据主题标签更改活动链接的 css

How to change css for active link based on the hashtag

提问by F Z

I have a situation here on how to change my active link css based on the hashtag. All the content was in the same page and I use the #url section to call the content.

我在这里有一个关于如何根据主题标签更改我的活动链接 css 的情况。所有内容都在同一页面中，我使用 #url 部分来调用内容。

i have try several javascript examples and tutorial but seems like its not working, so i decide create to a new question here and share my code with all of you.

我已经尝试了几个 javascript 示例和教程，但似乎不起作用，所以我决定在这里创建一个新问题并与大家分享我的代码。

Here is my url display in browser :

这是我在浏览器中显示的网址：

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

this is the code for side menu bar:

这是侧面菜​​单栏的代码：

<!-- 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 -->

and here is few examples of the content for the link:

以下是链接内容的几个示例：

<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>

here is the CSS:

这是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; }

what should i do to change active link for the each #link. Example, when i click Mergers & Acquisitions, only the "Mergers & Acquisitions" link have the active color instead of all link color.

我应该怎么做才能更改每个#link 的活动链接。例如，当我单击Mergers & Acquisitions 时，只有“Mergers & Acquisitions”链接具有活动颜色，而不是所有链接颜色。

i also try to create something like a:active, but not working.

我也尝试创建类似 a:active 的东西，但不起作用。

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

Please someone have an idea share and help me. Thank you

请有人有想法分享并帮助我。谢谢

---

---

p/s: antindexer just solved my problem. so what i add is : in style.css, i add:

p/s：antindexer 刚刚解决了我的问题。所以我添加的是：在style.css中，我添加：

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

and in html file. i add the javascript

并在 html 文件中。我添加了 javascript

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

回答by Khamidulla

What I can suggest is using jQuery. Somthing like this.

我可以建议的是使用 jQuery。像这样的东西。

$(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;
}

Because, first of all you are using anchor links, and you want to make it dynamic. If any other person can suggest solution using CSS I will appreciate that answer.

因为，首先您正在使用锚链接，并且您希望使其动态化。如果任何其他人可以使用 CSS 提出解决方案，我将不胜感激。

回答by Helper

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

.active {
    color: #BBA842!important;
}