Eu tenho uma situação aqui sobre como alterar o meu link ativo css com base na hashtag. Todo o conteúdo estava na mesma página e eu uso a seção #url para chamar o conteúdo.

Eu tentei vários exemplos de javascript e tutorial, mas parece que não está funcionando, então eu decido criar uma nova pergunta aqui e compartilhar meu código com todos vocês.

Aqui está minha exibição de URL no navegador:

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

este é o código para a barra de menu lateral:

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

e aqui estão alguns exemplos do conteúdo para o 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>

aqui está o 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; }

O que devo fazer para alterar o link ativo para cada # link. Exemplo, quando clicoFusões e Aquisições, apenas o link "Fusões e Aquisições" tem a cor ativa em vez de toda a cor do link.

Eu também tento criar algo como um: ativo, mas não está funcionando.

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

Por favor, alguém tenha uma idéia e me ajude. Obrigado

p / s: antindexer apenas resolveu meu problema. Então, o que eu adiciono é: in style.css, eu adiciono:

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

e no arquivo html. eu adiciono o javascript

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