tab选项卡(选择上面的菜单,下面出现对应的不同的内容)

最新推荐文章于 2021-06-07 18:19:46 发布

weixin_33785972

最新推荐文章于 2021-06-07 18:19:46 发布

阅读量1.2k

点赞数

文章标签： javascript 开发工具 java ViewUI

原文链接：http://www.cnblogs.com/xy-milu/p/6014069.html

版权

使用jQuery完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script src="jQuery/jquery-3.1.0.min.js"></script>
    <style>
        #menu{
            margin-top: 100px;
            margin-left: 200px;
            list-style: none;
            display: block;
            height: 50px;

        }
        #menu li{
            margin-top: -2%;
            list-style: none;
            float:left;
            height:50px;
            width:150px;
            line-height: 50px;
            background-color: #e5eaef;
            color: #3528fa;
            text-align: center;
            font-family: '微软雅黑';
        }
        #menu ul{
            display: none;
        }
        div{
            position: absolute;
            height: 150px;
            left:250px;
            display: none;
        }
        #menu li:hover{
            color: pink;
            background-color: #e7faf7;
            font-family: '微软雅黑';
        }
        .choosed{
            display: block;
        }
    </style>
</head>
<body>
<ul id="menu">
    <li>立秋<div ><img src="1.jpg"></div></li>
    <li>处暑<div><img src="2.jpg"></div></li>
    <li>秋分<div><img src="3.jpg"></div></li>
    <li>寒露<div><img src="4.jpg"></div></li>
</ul>

<script>
    $(document).ready(function() {
        $('#menu li').hover(function() {
                    $('div',this).slideDown(300);
                    $('div',this).addClass("choosed");},
        function() {
            $('div',this).slideUp(300);
            $('div',this).removeClass("choosed");})
    });
</script>
</body>
</html>

转载于:https://www.cnblogs.com/xy-milu/p/6014069.html

weixin_33785972

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
tab选项卡(选择上面的菜单,下面出现对应的不同的内容)

使用jQuery完成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <script src="jQuery/jquery-3.1.0.min.js"><...
复制链接

扫一扫