Cómo cambiar css para un enlace activo basado en el hashtag

Aquí tengo una situación sobre cómo cambiar mi css de enlace activo en función del 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 está funcionando, así que decido crear una nueva pregunta aquí y compartir mi código con todos ustedes.

Aquí está mi visualización de 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:

    

y aquí hay algunos ejemplos del contenido del enlace:

 

Capital Market

We have significant experience advising clients on complex securities law matters.We have advised on domestic and international cross-border transactions including overseas IPOs.

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.

  • Sukuks
  • Structured Finance
  • Take-overs
  • Underwriting Agreements
  • Warrants





  • Mergers & Acquisitions


    We advise on the full range of merger and acquisition transactions involving domestic and international businesses at all stages of development.

    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.

  • Capital Restructuring
  • Commercial Transactions
  • Consultancy
  • Corporate Compliance
  • Corporate Reorganisations
  • Due Diligence
  • Joint Venture
  • Privatisations
  • Private Equity & Venture Capital
  • Share & Business Acquisitions
  • Take-overs
  • 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? Por ejemplo, cuando hago clic en Fusiones y Adquisiciones , solo el enlace “Fusiones y Adquisiciones” tiene el color activo en lugar de todo el color del enlace.

    También bash crear algo así como: activo, pero no funciona.

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

    Por favor, alguien tenga una idea 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 el archivo html agrego el javascript

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

    Lo que puedo sugerir es usar jQuery. Algo así.

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

    Porque, en primer lugar, está utilizando enlaces de anclaje y desea hacerlo dynamic. Si alguna otra persona puede sugerir una solución usando CSS, agradeceré esa respuesta.

      jQuery(function() { jQuery('a').each(function() { if (jQuery(this).attr('href') === window.location.href) { jQuery(this).addClass('active'); } }); }); .active { color: #BBA842!important; }