jQuery—选项卡

最新推荐文章于 2019-05-25 08:43:15 发布

weixin_30788239

最新推荐文章于 2019-05-25 08:43:15 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wang1593840378/p/6071767.html

版权

用jQuery实现选项卡，比原生JS更加简便，但是原理还是一样的：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap {
            width: 400px;
            height: 300px;
            margin: 100px auto;
        }

        #wrap div {
            width: 400px;
            height: 300px;
            border: #333 2px solid;
            line-height: 300px;
            text-align: center;
            font-size: 50px;
            display: none;
        }

        #wrap .active {
            background: red;
            color: #fff;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            var aBtn = $('input');
            var aDiv = $('#wrap div');

            aBtn.click(function(){
                aBtn.removeClass('active');
                aDiv.hide();
                $(this).addClass('active');
                aDiv.eq($(this).index()).show();
            });
        });
    </script>
</head>
<body>
<div id="wrap">
    <input type="button" value="按钮1" class="active">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <div style="display:  block;">div1</div>
    <div>div2</div>
    <div>div3</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/wang1593840378/p/6071767.html

weixin_30788239

关注

0
点赞
踩
0

收藏

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

用jQuery实现选项卡，比原生JS更加简便，但是原理还是一样的：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #wrap { ...
复制链接

扫一扫