如何使用jquery在菜单的两个位置添加类

时间:2014-12-10 07:14:22

标签: jquery

 <div class="leftside-navigation">
        <ul class="sidebar-menu" id="nav-accordion">
        <li class="sub-menu">
            <a href="javascript:;">
                <i class=" fa fa-bar-chart-o"></i>
                <span>Charts</span>
            </a>
            <ul class="sub">
                <li><a href="morris.html">Morris</a></li>
                <li><a href="chartjs.html">Chartjs</a></li>
                <li><a href="sdad.sas">Flot Charts</a></li>
                <li><a href="c3_chart.html">C3 Chart</a></li>
            </ul>
        </li>
        <li class="sub-menu">
            <a href="javascript:;">
                <i class=" fa fa-bar-chart-o"></i>
                <span>Maps</span>
            </a>
            <ul class="sub">
                <li><a href="google_map.html">Google Map</a></li>
                <li><a href="test.php">Vector Map</a></li>
            </ul>
        </li>
        <li class="sub-menu">
            <a href="javascript:;">
                <i class="fa fa-glass"></i>
                <span>Extra</span>
            </a>
            <ul class="sub">
                <li><a href="blank.html">Blank Page</a></li>
                <li><a href="lock_screen.html">Lock Screen</a></li>
                <li><a href="profile.html">Profile</a></li>
                <li><a href="invoice.html">Invoice</a></li>
                <li><a href="pricing_table.html">Pricing Table</a></li>
                <li><a href="timeline.html">Timeline</a></li>                    
                <li><a href="qqw.qq">Media Gallery</a></li>
                <li><a href="404.html">404 Error</a></li>
                <li><a href="500.html">500 Error</a></li>
                <li><a href="registration.html">Registration</a></li>
            </ul>
        </li>
        <li>
            <a href="login.html">
                <i class="fa fa-user"></i>
                <span>Login Page</span>
            </a>
        </li>
    </ul></div>

我有一个上面的菜单如何才能把class =&#34; active&#34;用jquery在下面的两个地方。

实施例: -                       。    。    

<li class="sub-menu">
            <a href="javascript:;" class="active">
                <i class=" fa fa-bar-chart-o"></i>
                <span>Maps</span>
            </a>
            <ul class="sub">
                <li><a href="google_map.html">Google Map</a></li>
                <li class="active"><a href="vector_map.html">Vector Map</a></li>
            </ul>
        </li>

。   。   。

这意味着需要添加class =&#34; active&#34;根据浏览器上的url链接在两个地方。在此示例中,网址链接为http://test.com/testproject/vector_map.html

提前致谢。

1 个答案:

答案 0 :(得分:1)

使用jquery

为第二个li添加类
$("ul.sub li:eq(1)").addClass("active");

FIDDLE