滑动门

最新推荐文章于 2022-06-19 22:31:28 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2022-06-19 22:31:28 发布

阅读量316

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Guoyu1_/article/details/85756855

版权

js 专栏收录该内容

83 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换</title>
<style type="text/css">
.box{width: 601px;height: 500px;border: 1px solid #000; }
.top{width: 601px;height: 150px;text-align: center;border-bottom: 2px solid #000}
.a{width: 300px;height: 150px;line-height: 120px;background: #477687;float: left;display: block;}
.active{background: orange;}
.txt{text-align: center}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="box">
<div class="top">
<button class="a active">1</button>
<button class="a">2</button>
</div>

<div class="txt" style="display: block">123</div>
<div class="txt" style="display:none">456</div>
</div>
<script>
$(function () {
$('button').click(function () {
$('button').removeClass('active');/*当前按钮添加active样式*/
$(this).addClass('active');

var txt=$(this).index('button');
$('.txt').hide();
$('.txt:eq('+txt+')').show();
});

});
</script>
</body>
</html>

.box{width:1103px;height: 789px}
.lf{    width: 23%;height: 789px;text-align: center;float: left;list-style: none;}
ul{height: 100%;width: 100%}
.a{    width: 100%;line-height: 50px;background: #e3eefd;float: left;display: block;}
.active{background: orange;}
.txt11{float: left;width: 77%;height: 100%}

<div class="box">
    <div class="lf">
        <ul>
            <li class="a active">1</li>
            <li class="a">2</li>
        </ul>


    </div>

    <div class="txt11" style="display: block">123</div>
    <div class="txt11" style="display:none">456</div>
</div>
<script>
    $(function () {
        $('li').click(function () {
            $('li').removeClass('active');/*当前按钮添加active样式*/
            $(this).addClass('active');

            var txt=$(this).index('li');
            $('.txt11').hide();
            $('.txt11:eq('+txt+')').show();
        });

    });
</script>

前端路上迷茫的小鲨鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滑动门

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>切换</title> <style type="text/css"> .box{width: 601px;height: 500px;...
复制链接

扫一扫

专栏目录