javascript - How to change css for active link based on the hashtag - Stack Overflow

admin管理员组

文章数量:1357273

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.

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.

Here is my url display in browser :

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

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="#corporatemercial">
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 plex 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 plex 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 panies to public listed panies 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:

/*/*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.

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

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:

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

and in html file. i add the javascript

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

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.

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.

Here is my url display in browser :

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

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="#corporatemercial">
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 plex 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 plex 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 panies to public listed panies 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:

/*/*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.

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

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:

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

and in html file. i add the javascript

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

• javascript
• html
• css
• url
• hashtag

Share Improve this question Follow edited Oct 28, 2013 at 4:32 F Z asked Oct 28, 2013 at 3:56 F ZF Z 52522 gold badges55 silver badges1212 bronze badges 3

• what are you trying to do? all the menu link should change on active / hover a link? – super Commented Oct 28, 2013 at 4:05
• No, i just want to change the color for active link when the #link selected, i cant use normal css a:active in style as this is retrieve from the url #. – F Z Commented Oct 28, 2013 at 4:28
• this looks like it won't work at all for users with js disabled... – Eevee Commented Oct 28, 2013 at 4:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

What I can suggest is using jQuery. Somthing like 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;
}

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.

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

.active {
    color: #BBA842!important;
}

本文标签： javascriptHow to change css for active link based on the hashtagStack Overflow