JQUERY

jquery 切换选择css样式

利用jquery来切换导航菜单的css样式:

<ul class="menu">
    <li class="menu-item  current-menu-item ">
        <a href="http://www.xiaoshu168.com">首页</a>
    </li>
    <li class="menu-item ">
        <a href="http://www.xiaoshu168.com/php">PHP</a>
    </li>
    <li class="menu-item ">
        <a href="http://www.xiaoshu168.com/linux">LINUX</a>
    </li>
    <li class="menu-item ">
        <a href="http://www.xiaoshu168.com/jquery">JQUERY</a>
    </li>
    <li class="menu-item ">
        <a href="http://www.xiaoshu168.com/html">HTML</a>
    </li>
    <li class="menu-item ">
        <a href="http://www.xiaoshu168.com/wxapplet">微信小程序</a>
    </li>
    <li class="menu-item ">
        <a href="http://www.xiaoshu168.com/tag/laravel-packages">Laravel5 扩展包</a>
    </li>
    <li class="menu-item right ">
        <a target="_blank" href="http://www.xiaoshu168.com/sitemaps">地图</a>
    </li>
    <li class="menu-item right ">
        <a target="_blank" href="http://www.xiaoshu168.com/tags/list">标签</a>
    </li>
</ul>

如果选择了就给li添加current-menu-item样式

$(".menu").find('li').click(function(){

    $(this).siblings().removeClass('current-menu-item');
    $(this).addClass('current-menu-item');
});


(0)
分享:

本文由:xiaoshu168 作者:xiaoshu发表,转载请注明来源!

标签:

相关阅读