zoukankan      html  css  js  c++  java
  • jQuery实现简单导航栏的样式切换

    style css样式部分:

    ul{
    margin: 0 auto;
    height: 50px;
    background-color: #369;
    }

    ul>li{
    text-decoration: none;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    padding: 0 15px;
    border-left: 1px solid #365;

    }
    .active,ul>li:hover{
    background-color: #fff;
    color: #369;
    cursor: pointer;
    }

    html部分:

    <ul>
    <li>首页</li><li>关于我们</li><li>产品中心</li><li>新闻中心</li><li>关于我们</li>
    </ul>

    方法一:https://www.jkys120.com/article/95498/

    $li = $('ul>li');
    // console.log($li);
    $li.bind('click',function(){
    $this=$(this);
    $this.addClass('active');
    $this.siblings().removeClass('active');
    console.log('111');
    });https://www.jkys120.com/article/95498/


    方法二:(原生Js)

    for(let i = 0 ;i < navs.length; i++){
    navs[i].onclick = function(e){
    let activedNav = this.parentNode.querySelector('.active');
    if(activedNav == this){
    return;
    }
    activedNav.className = '';
    this.className = 'active';
    }
    }

  • 相关阅读:
    8 网站用户密码保存
    10 XSRF和XSS
    评分预测
    社会化推荐
    借助上下文信息
    UGC
    冷启动
    Git秘籍:在 Git 中进行版本回退
    Google在三大系统上停止对Chrome Apps的支持
    Windows 的 AD 域寄生于 Linux 机器
  • 原文地址:https://www.cnblogs.com/zqw111/p/11255348.html
Copyright © 2011-2022 走看看