JQuery 选项卡

最新推荐文章于 2022-10-24 17:31:20 发布

MakChiKin

最新推荐文章于 2022-10-24 17:31:20 发布

阅读量136

点赞数 1

分类专栏： jquery 文章标签： jquery

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/020302.js"></script>
	<link rel="stylesheet" href="css/020302.css">
</head>
<body>
<div class="btns">
	<input type="button" name="" value="01" class="current">
	<input type="button" name="" value="02">
	<input type="button" name="" value="03">
</div>
<div class="cons">
	<div class="active">选项卡一的内容</div>
	<div>选项卡二的内容</div>
	<div>选项卡三的内容</div>
</div>
</body>
</html>

/*按钮组*/
.btns input{
    width:100px;
    height:40px;
    background-color:#ddd;
    border:0;
}
/*按钮*/
.btns .current{
    background-color:gold;
}
/*内容组*/
.cons div{
    width:500px;
    height:300px;
    background-color:gold;
    display:none;
    text-align:center;
    line-height:300px;
    font-size:30px;
}
/*内容面板和激活状态*/
.cons .active{
    display: block;
}

$(function(){
    var $btn = $('.btns input');
    var $div = $('.cons div');

    $btn.click(function(){
        // this 指的是原生的this，它表示当前点击的对象，使用jquery的对象需要用$(this)

        // 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式，siblings是选择同级元素
        $(this).addClass('current').siblings().removeClass('current');

        //alert( $(this).index() ; //弹出当前按钮的索引值
        // 当前点击的按钮对应索引值的div加上active样式，其他的去掉active样式
        $div.eq( $(this).index() ).addClass('active').siblings().removeClass('active');
    })
})

MakChiKin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 选项卡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"><...
复制链接

扫一扫

专栏目录