tab栏-首页滑动效果jq 鼠标移开默认选中当前

最新推荐文章于 2023-01-10 11:23:28 发布

royal-

最新推荐文章于 2023-01-10 11:23:28 发布

阅读量232

点赞数

文章标签： jquery css3 css javascript html

本文链接：https://blog.csdn.net/qq_46003166/article/details/104641237

版权

// html
<ul class="link-list">
   <li class="item active">
       <a href="javascript:;" class="link">首页</a>
   </li>
   <li class="item">
       <a href="./about.html" class="link">了解</a>
   </li>
   <li class="item">
       <a href="./news.html" class="link">新闻</a>
   </li>
</ul>

// css
.link-list {
  height: 79px;
}
.link-list .item {
  float: left;
  width: 80px;
  margin-right: 10px;
  height: 100%;
}

.link-list .item .link {
  display: inline-block;
  width: 100%;
  height: 80px;
  color: #ffffff;
  line-height: 79px;
  text-align: center;
}
.link-list .item.active {
  border-bottom: 3px solid #ee5051;
}

// js
var tabIndex;
for (var i = 0; i < $(".link-list .item").length; i++) {
  if (
    $(".link-list .item")
      .eq(i)
      .hasClass("active")
  ) {
    tabIndex = i;
  }
}

$(".link-list .item").hover(
  function () {
    $(this)
      .addClass("active")
      .siblings()
      .removeClass("active");
  },
  function () {
    $(".link-list .item").removeClass("active");

    $(".link-list .item")
      .eq(tabIndex)
      .addClass("active");
  }
);