极简单的jquery mouseover 切换

最新推荐文章于 2023-04-03 20:50:29 发布

林中明月间。

最新推荐文章于 2023-04-03 20:50:29 发布

阅读量926

点赞数

分类专栏： Js、Jq轮播图、切换文章标签： tab 切换

Js、Jq轮播图、切换专栏收录该内容

28 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>极简单的tap切换</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.tab-g {
	border-bottom:0;
	height:36px;
}
.tab-g li {
	list-style:none;
	float:left;
	height:34px;
	margin-right:20px;
	color:#909090;
	line-height:34px;
	text-align:center;
	cursor:pointer;
}
.tab-g li.active-gn {
	color:#50B400;
	border-bottom:3px solid #50B400;
}
.bottom .products {
	height:476px;
}
.bottom .products .main-gn {
	display:none;
}
.bottom .products .main-gn.selected-gn {
	display:block;
}
</style>
</head>
<body>
<div> 
  <!-- tap切换 -->
  <ul class="tab-g clearfix">
    <li class="tab-gn active-gn">tap1</li>
    <li class="tab-gn">tap2</li>
    <li class="tab-gn">tap3</li>
  </ul>
</div>
<!-- main-gn内的内容是切换的内容 -->
<div class="bottom clearfix">
  <div class="products">
    <div class="main-gn selected-gn"><img src="http://www.jq22.com/img/cs/500x300a.png" alt=""><br>
      内容一</div>
    <div class="main-gn"><img src="http://www.jq22.com/img/cs/500x300b.png" alt=""><br>
      内容二</div>
    <div class="main-gn"><img src="http://www.jq22.com/img/cs/500x300c.png" alt=""><br>
      内容三</div>
  </div>
</div>

<script>
$(function() {
    //1. 给li注册mouseenter事件
    $(".tab-gn").mouseenter(function() {//可以改为 click、onmousevoer根据项目需求而定
        //2. 让当前li添加active类，并且让其他的li移除active类
        $(this).addClass("active-gn").siblings().removeClass("active-gn");
        //3. 让对应下标的div添加selected，并且让其他div移除selected类
        var idx = $(this).index();
        $(".main-gn").eq(idx).addClass("selected-gn").siblings().removeClass("selected-gn");
    });
})
</script>
</body>
</html>