简单的选项卡下拉效果

时间:2022-04-24 06:27:36

一、效果1

  简单的选项卡下拉效果 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-2.1.4.min.js"></script>
<style type="text/css">
    *{margin:0;padding:0;}
    h1{margin-left:20px;margin-top:20px;font-size:16px;background-color:skyblue;width:100px;line-height:30px;text-align:center;color:white;position:relative;}
    dl{width:200px;background-color:pink;display:none;position:absolute;left:0;top:30px;}
    dd{font-size:12px;}
    dd:hover{background-color:orange;color:gray;}
</style>
</head>
<body>
    <h1>主菜单
        <dl>
            <dd>子菜单1</dd>
            <dd>子菜单2</dd>
            <dd>子菜单3</dd>
        </dl>
    </h1>

    <script type="text/javascript">
        $(function(){
            $("h1").hover(function(){
                $("dl").show();
            },function(){
                $("dl").hide();
            });
        });
    </script>
</body>
</html>

 二、效果2

  简单的选项卡下拉效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery-2.1.4.min.js"></script>
<style type="text/css">
    li{list-style:none;float:left;background-color:skyblue;color:white;margin-right:20px;width:80px;line-height:30px;text-align:center;position:relative;}
    dl{margin:0;background-color:pink;width:100px;}
    dd{margin:0;color:white;}
    .subNav{display:none;position:absolute;left:0;top:30px;}
    dd:hover{background-color:orange;color:gray;}
</style>
</head>
<body>
    <ul class="nav">
        <li>主菜单1
            <dl class="subNav">
                <dd>1-子菜单01</dd>
                <dd>1-子菜单02</dd>
                <dd>1-子菜单03</dd>
            </dl>
        </li>
        <li>主菜单2
            <dl class="subNav">
                <dd>2-子菜单01</dd>
                <dd>2-子菜单02</dd>
                <dd>2-子菜单03</dd>
            </dl>
        </li>
        <li>主菜单3
            <dl class="subNav">
                <dd>3-子菜单01</dd>
                <dd>3-子菜单02</dd>
                <dd>3-子菜单03</dd>
            </dl>
        </li>
    </ul>

    <script type="text/javascript">
        $(function(){
            var n;
            $(".nav li").hover(function(){
                n=$(".nav li").index($(this));
                $(".subNav").eq(n).show();
            },function(){
                $(".subNav").eq(n).hide();
            });
        });
    </script>
</body>
</html>

三、效果3

  简单的选项卡下拉效果 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style type="text/css">
    h1{font-weight:normal;margin:0;}
    dl{margin:0;}
    dd{margin:0;}
    .leftBox{width:280px;text-align:center;}
    .columnBox{margin-bottom:10px;color:white;}
    .columnBox h1{margin-bottom:10px;line-height:40px;background-color:skyblue;}
    .columnBox dl{display:none;background-color:pink;}
    .columnBox dd{line-height:30px;}
    dd:hover{background-color:orange;color:gray;}
</style>
</head>
<body>
    <div class="leftBox">
        <div class="columnBox">
            <h1>菜单标题1</h1>
            <dl>
                <dd>菜单列表项1</dd>
                <dd>菜单列表项2</dd>
                <dd>菜单列表项3</dd>
            </dl>
        </div>
        <div class="columnBox">
            <h1>菜单标题2</h1>
            <dl>
                <dd>菜单列表项1</dd>
                <dd>菜单列表项2</dd>
                <dd>菜单列表项3</dd>
            </dl>
        </div>
        <div class="columnBox">
            <h1>菜单标题3</h1>
            <dl>
                <dd>菜单列表项1</dd>
                <dd>菜单列表项2</dd>
                <dd>菜单列表项3</dd>
            </dl>
        </div>
    </div>

    <script type="text/javascript">
        $(function(){
            $(".columnBox h1").toggle(function(){
                $(this).siblings("dl").show();
                $(this).css("margin-bottom","0");
            },function(){
                $(this).siblings("dl").hide();
          $(this).css("margin-bottom","10px"); }); });
</script> </body> </html>

 四、效果4

  简单的选项卡下拉效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style type="text/css">
    dl{margin:0;}
    dd{margin:0;}
    img{display:block;border:none 0;}
    .photoBox{overflow:hidden;}
    .tabBox{width:100px;background-color:pink;color:white;text-align:center;float:left;}
    .tabBox dd{line-height:30px;margin:10px 0;}
    .imageBox{width:400px;height:300px;border:1px solid pink;overflow:hidden;float:left;}
    .imageBox img{display:none;}
    .textColor{color:orange;}
    .bgColor{background-color:skyblue;}
</style>
</head>
<body>
    <div class="photoBox">
        <dl class="tabBox">
            <dd>标签1</dd>
            <dd>标签2</dd>
            <dd>标签3</dd>
            <dd>标签4</dd>
            <dd>标签5</dd>
        </dl>
        <div class="imageBox">
            <img src="https://www.baidu.com/img/bd_logo1.png" width="400px" height="300px" />
            <img src="http://www.google.cn/landing/cnexp/google-search.png" width="400px" height="300px" />
            <img src="https://img04.sogoucdn.com/app/a/100520122/6b53c9d0_pc.gif" width="400px" height="300px" />
            <img src="https://shared-https.ydstatic.com/dict/v2016/logo.png" width="400px" height="300px" />
            <img src="https://p.ssl.qhimg.com/t01d1f1a2ae31e3c3e4.png" width="400px" height="300px" />
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $(".imageBox img:first").css("display","block");
        });
        $(function(){
            $(".tabBox dd").mouseover(function(){
                /*大图切换*/
                var n=$(".tabBox dd").index($(this));
                $(".imageBox img").hide();
                $(".imageBox img").eq(n).show();
                /*标签高亮*/
                $(".tabBox dd").removeClass("textColor bgColor");
                $(this).addClass("textColor bgColor");
            });
        });
    </script>
</body>
</html>

 五、效果5

  简单的选项卡下拉效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery.min.js"></script>
<style type="text/css">
    ul{margin:0;padding:0;}
    li{list-style:none;}
    dl{margin:0;}
    dd{margin:0;}
    .main{border:1px solid orange;height:30px;line-height:30px;width:60px;color:#323232;text-align:center;position:relative;}
    .Box{border:1px solid orange;width:200px;padding:10px;position:absolute;top:30px;left:30px;overflow:hidden;display:none;}
    .boxTitle{width:100%;height:20px;text-align:center;}
    .boxTitle .leftT{float:left;}
    .boxTitle .rightT{float:right;}
    .boxTitle a{display:block;height:18px;line-height:18px;width:80px;border:1px solid skyblue;cursor:pointer;}
    .boxMain{width:100%;margin-top:10px;}
    .boxMain dl{display:none;}
    .boxMain dd{background-color:pink;color:#323232;margin:5px 0;}
    .currentA{background-color:skyblue;color:white;}
</style>
</head>
<body>
    <ul class="nav">
        <li class="main">记 录
            <div class="Box">
                <ul class="boxTitle">
                    <li class="leftT"><a>浏览记录</a></li>
                    <li class="rightT"><a>登录记录</a></li>
                </ul>
                <div class="boxMain">
                    <dl>
                        <dd>百度</dd>
                        <dd>谷歌</dd>
                        <dd>必应</dd>
                        <dd>搜狗</dd>
                    </dl>
                    <dl>
                        <dd>2018.01.20</dd>
                        <dd>2018.03.15</dd>
                        <dd>2018.04.25</dd>
                    </dl>
                </div>
            </div>
        </li>
    </ul>

    <script type="text/javascript">
        $(document).ready(function(){
            $(".boxTitle a:first").addClass("currentA");
            $(".boxMain dl:first").css("display","block");
        });
        $(function(){
            $(".main").hover(function(){
                $(".main .Box").show();
            },function(){
                $(".main .Box").hide();
            });
            $(".boxTitle a").click(function(){
                var num=$(".boxTitle a").index($(this));
                document.title=num;
                $(".boxTitle a").removeClass("currentA");
                $(this).addClass("currentA");
                $(".boxMain dl").hide();
                $(".boxMain dl").eq(num).show();
            });
        });
    </script>
</body>
</html>