温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

利用jQuery实现Tab选项卡

发布时间:2020-07-03 12:42:50 来源:网络 阅读:607 作者:歆冉 栏目:web开发
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            font-family: 微软雅黑;
        }
        .menu{
            height: 50px;
            background: #272822;
        }
        .menu a{
            display: block;
            height: 50px;
            width: 80px;
            color: #fff;
            float: left;
            line-height: 50px;
            text-decoration: none;
            font-size: 20px;
            /*border: 1px solid red;*/
            text-align: center;
        }
        .menu a:first-child{
            background: #888;
        }
        .info{
            height: 200px;
            color: #fff;
            background: #888;
            overflow: hidden;
        }
        .info p{
            padding: 20px;
            line-height: 30px;
            display: none;
        }
        .info p:first-child{
            display: block;     //  把第一个进行显示出来
        }
    </style>
    <script src="jquery-1.8.3.js"></script>
</head>
<body>
    <div class="menu">
        <a href="">html</a>
        <a href="">js</a>
        <a href="">jQuery</a>
    </div>
    <div class="info">
        <p>html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言html 是一门语言</p>

        <p>js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言js 是一门语言</p>

        <p>jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言jQuery 是一门语言</p>
    </div>
</body>
<script type="text/javascript">
$('.menu a').mouseover(function(){
    // 让其他的a标签的背景颜色都去掉
    $('.menu a').css({'background':'#272822'});
    // 把当前的a标签的背景颜色改变
    $(this).css({'background':'#888'});
    //获取索引
    index=$(this).index('.menu a');   
    // 隐藏掉所有的p标签
    $('.info p').hide();
    // 显示出当前的p标签
    $('.info p').eq(index).show();   

});
</script>
</html>
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI