2

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

我已经尝试了几个 javascript 示例和教程，但似乎它不起作用，所以我决定在这里创建一个新问题并与大家分享我的代码。

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

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

这是侧面菜​​单栏的代码：

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

以下是链接内容的几个示例：

<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 & Acquisitions时，只有“Mergers & Acquisitions”链接具有活动颜色，而不是所有链接颜色。

我也尝试创建类似 a:active 的东西，但不工作。

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

请有人有想法分享并帮助我。谢谢

p/s：antindexer 刚刚解决了我的问题。所以我添加的是：在 style.css 中，我添加：

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

并在 html 文件中。我添加了javascript

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

2 回答 2

4

我可以建议使用 jQuery。像这样的东西。

$(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 的解决方案，我将不胜感激。

于 2013-10-28T04:16:22.973 回答
0 
    jQuery(function() {
      jQuery('a').each(function() {
        if (jQuery(this).attr('href')  ===  window.location.href) {
          jQuery(this).addClass('active');
        }
      });
    });  

.active {
    color: #BBA842!important;
}
于 2014-05-28T14:13:07.487 回答