Как изменить CSS для активной ссылки на основе хэштега

У меня есть ситуация здесь о том, как изменить мою активную ссылку CSS на основе хэштега. Весь контент был на одной странице, и я использую раздел #url для вызова контента.

Я попробовал несколько примеров javascript и учебник, но кажется, что он не работает, поэтому я решил создать новый вопрос здесь и поделиться своим кодом со всеми вами.

Вот мой URL-адрес в браузере:

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

это код для боковой строки меню:




Our Services:
<a href="#capitalmarket">
Capital Market
</a>
<a href="#mergersandacquisitions">
Mergers & Acquisitions
</a>
<a href="#corporatecommercial">
Corporate Commercial
</a>



и вот несколько примеров содержания по ссылке:


Capital Market 

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


    Sukuks
    Structured Finance
    Take-overs
    Underwriting Agreements
    Warrants






<br><br><br><br><br>Mergers & Acquisitions<br>

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

    Capital Restructuring
    Commercial Transactions
    Consultancy
    Corporate Compliance
    Corporate Reorganisations
    Due Diligence
    Joint Venture
    Privatisations
    Private Equity & Venture Capital
    Share & Business Acquisitions
    Take-overs


вот 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; }

что я должен сделать, чтобы изменить активную ссылку для каждой ссылки #. Пример, когда я нажимаюСлияния & Приобретения, только "Слияния & Приобретения» ссылка имеет активный цвет вместо всех цветов ссылки.

Я также пытаюсь создать что-то вроде: активный, но не работает.

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

Пожалуйста, у кого-нибудь есть идея, поделитесь и помогите мне. Спасибо

p / s: antindexer только что решил мою проблему. так что я добавляю: в style.css, я добавляю:

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

и в HTML-файл. я добавляю javascript


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

Ответы на вопрос(2)

Ваш ответ на вопрос