jQuery 滑动及点击切换效果

 

效果图如下：

初始化

hover效果：滑动menuitem，‘首页’不变，字体颜色改变，有下划线展示。

即在动态添加boder-bottom，改变字体颜色颜色

.menuItem:hover{
      border-bottom: 2px solid #108ee9;
      color: #108ee9;
 }

click效果：点击其他menuitem，‘首页’样式清除，且字体颜色改变，有下划线展示。

即点击menuitem，利用事件委托，动态添加itemSelected，且移除相邻兄弟属性itemSelected

 $('li').eq(index).addClass('itemSelected').siblings().removeClass('itemSelected')

完整代码如下： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body,html{
      margin: 0;
      padding: 0;
    }
    .wrap{

    }
    .menu{
      background: black;
      height: 60px;
      width: 100%;
      list-style:none;
      position: fixed;
      top: 0;
      margin: 0;
    }
    .menuItem{
      font-size: 14px;
      text-align: center;
      float: left;
      width: 90px;
      color: white;
      line-height: 60px;
      margin-top: -1px
    }
    .itemSelected{
      border-bottom: 2px solid #108ee9;
      color: #108ee9;
    }
    .menuItem:hover{
      border-bottom: 2px solid #108ee9;
      color: #108ee9;
    }
    .clearfix:after{
      display: block;
      content: '';
      clear: both;
    }
  </style>
</head>
<body>
<div class="wrap">
  <ul class="menu clearfix"  >
    <li class="itemSelected menuItem" >首页</li>
    <li class="menuItem" >自驾导航</li>
    <li class="menuItem" >共享出行</li>
    <li class="menuItem" >公共出行</li>
    <li class="menuItem" >信息服务</li>
    <li class="menuItem" >相关下载</li>
  </ul>
  <div class="content">

  </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>

//采用事件委托进行绑定
  $('.menu').on('click',function (event) {
    // 判断标签是否li
    if (event.target.tagName === 'LI') {
      $tar =$(event.target)
      //获取子元素index
      var index =  $tar.parent().children().index($tar);
      $('li').eq(index).addClass('itemSelected').siblings().removeClass('itemSelected')
    }
  })
</script>
</body>
</html>

 

posted @ 2019-06-05 14:38  灰姑娘的冰眸  阅读(1186)  评论(0)    收藏  举报