Tengo una situación aquí sobre cómo cambiar mi enlace activo css basado en el hashtag. Todo el contenido estaba en la misma página y uso la sección #url para llamar al contenido.

He intentado varios ejemplos de javascript y un tutorial, pero parece que no funciona, así que decido crear una nueva pregunta aquí y compartir mi código con todos ustedes.

Aquí está mi pantalla url en el navegador:

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

Este es el código para la barra de menú 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 -->

Y aquí hay algunos ejemplos del contenido del enlace:

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

Aquí está el 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; }

¿Qué debo hacer para cambiar el enlace activo para cada #link. Ejemplo, cuando hago clicFusiones y Adquisiciones, solo el enlace "Fusiones y adquisiciones" tiene el color activo en lugar de todo el color del enlace.

También trato de crear algo como: activo, pero no funciona.

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

Por favor que alguien tenga una idea para compartir y ayudarme. Gracias

p / s: antindexer acaba de resolver mi problema. así que lo que agrego es: en style.css, agrego:

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

y en archivo html. agrego el javascript

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