如何根据主题标签更改活动链接的CSS [英] How to change css for active link based on the hashtag

问题描述

我有一个情况，如何根据主题标签更改我的活动链接css。
所有的内容都在同一个页面，我使用#url部分来调用内容。

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.

我尝试了几个javascript示例和教程，但似乎它不工作，所以我决定创建一个新的问题，并与所有的人分享我的代码。

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.

这是我的URL在浏览器中显示：

Here is my url display in browser :

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

这是侧边选单列的程式码： / p>

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="#corporatecommercial">
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 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>

这里是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; }

我应该如何更改每个#link的活动链接。例如，当我点击 Mergers&获取，只有合并与收购链接具有活动的颜色，而不是所有链接颜色。

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刚刚解决了我的问题。所以我添加的是：
在style.css，我添加：

p/s: antindexer just solved my problem. so what i add is : in style.css, i add:

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

和html文件。我添加了javascript

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>

推荐答案

我可以建议使用jQuery。像这个。

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

因为，首先你使用锚链接，它动态。如果任何其他人可以建议解决方案使用CSS我会赞赏的答案。

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.

这篇关于如何根据主题标签更改活动链接的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！