teb切换（鼠标放上）-阿里云开发者社区

teb切换（鼠标放上）

2023-09-15 51

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： teb切换（鼠标放上）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab切换jquery代码</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
* {
 margin:0;
 padding:0;
}
.wrap {
 margin:50px auto;
 width:400px;
}
ul {
 list-style:none;
 width:100%;
}
.tab li {
 float:left;
 width:100px;
 height:40px;
 line-height:40px;
 text-align:center;
 cursor:pointer;
 background-color:#fff;
}
.tab li.active {
 background-color:#00bc12;
    border-bottom: 2px solid blue;
 color:#fff;
}
/*清除浮动*/
        .clearfix:after {
 content:'';
 display:table;
 clear:both
}
.clearfix {
 *zonm:1;
}
/* IE 6/7 */
        .clearfix {
 zoom:1;
}
.product .main a img {
 vertical-align:top;
}
.product .main {
    width: 400px;
    height: 400px;
    line-height: 400px;
    text-align: center;
    border: 1px solid red;
 display:none;
}
.product .main.selected {
 display:block;
}
</style>
</head>
<body>
<div class="wrap">
    <ul class="tab clearfix">
        <li οnmοuseenter="Move(this)" class="tab-item active">我是切换1</li>
        <li οnmοuseenter="Move(this)" class="tab-item">我是切换2</li>
        <li οnmοuseenter="Move(this)" class="tab-item">我是切换3</li>
        <li οnmοuseenter="Move(this)" class="tab-item">我是切换4</li>
    </ul>
    <div class="product">
        <div class="main selected">我是切换1</div>
        <div class="main">我是切换2</div>
        <div class="main">我是切换3</div>
        <div class="main">我是切换4</div>
    </div>
</div>
<script>
function Move(obj) {
    $(obj).addClass("active").siblings().removeClass("active");
    var index = $(obj).index(); //获取索引号
    console.log(index);
    $(".main").eq(index).addClass("selected").siblings().removeClass("selected");
}
</script>
</body>
</html>

teb切换（鼠标放上）

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

teb切换（鼠标放上）

热门文章

最新文章

相关电子书