HTML层级菜单和选项卡练习

最新推荐文章于 2022-10-10 18:15:00 发布

lealiujj

最新推荐文章于 2022-10-10 18:15:00 发布

阅读量738

点赞数

文章标签： html

本文链接：https://blog.csdn.net/lealiujj/article/details/100029973

版权

总结：
实现原理：本质是通过Jquery代码来设置菜单元素点击时给内容应用不同的css样式来实现。通过给元素动态增加类名去除类名来实时更新对应的类选择器样式。
css部分：
菜单内内容通过css样式中的display属性默认设置为隐藏display: none，新建一条样式选择器，通过class来选择元素，设置该样式的display属性为显示display: block。这里是对同一个样式属性display进行操作，要注意样式权重问题。行内式样式权重1000，id 100，类及伪类 10，标签1。
javascript部分：
通过Jquery找到对应的元素对象设置点击事件的执行代码，并且利用Jquery选择器转移获取到其他元素对象，通过Jquery中封装的样式操作方法toggleClass（“myclass”）//切换设置，有则删除无则添加、removeClass(“myClass”) ,给内容元素设置class类名，从而样式通过类名找到该元素更新样式

Demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin-left: 0px;
        }
        ul{
            list-style: none;
            margin: 0px;
            padding-left: 5px;
            /* background: gold; */
        }
        .current{
            background: orchid;
            display: block;
        }
        ul ul{
            display: none;
        }
        .tab div{
            width: 200px;
            height: 200px;
            background: gray;
            float: left;
            /* display: inline; */ /*注意，如果这里用display：inline，*/
            /*则三个div元素的大小会被限制，设置的大小失效*/
            /* border: 20px solid red; */
            
        }
        .tab{
            position: relative;/*因为子元素需要相对于父元素绝对定位所以父元素*/
            /*需要设置定位*/
        }
        .l2 div{
             /*方式一需要设置位置让三个选卡飘移叠在一起*/
            position: absolute; 
            /*方式二也可以直接设置元素display属性为none来隐藏，因为元素隐藏它的位置不会保留*/
            
        }
        
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $barmenu = $(".barmenu");
            $barmenu.click(function(){
                /*方式一*/
                $(this).next().toggleClass("current")
                .parent().siblings().find(".barmenu").next()
                .removeClass("current");
                /*方式二，直接调用jQuery的效果函数*/
                $(this).next().stop().slideToggle().parent()
                .siblings().find(".barmenu").next().slideUp();
                /*方式三，直接在转移集选择里加选择器*/
                $(this).next().stop().slideToggle().parent()
                .siblings().children("ul").slideUp();
                // alert($(this).next().children().length);
                // $(this).next().toggleClass("current")
                // .parent().siblings().children().eq(1)
                // .removeClass("current");
            });
            var $l1 = $(".l1"),
            $l2 = $(".l2");
            $l1.children().click(function(){
                $(this).css({"background":"gold"}).siblings().css("background","gray");
                // alert($(this).index());
                $l2.children().eq($(this).index()).css({"background":"gold"})
                .show().siblings().hide();
            });
        });
    </script>
</head>
<body>
    <div class="sidebar">
        <ul>
            <a href="#" class="barmenu">phone</a>
            <ul class="current">
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        </ul>
        <ul>
            <a href="#" class="barmenu">PC</a>
            <ul>
                <li>444</li>
                <li>555</li>
                <li>666</li>
            </ul>
        </ul>
        <ul>
            <a href="#" class="barmenu">pad</a>
            <ul>
                <li>777</li>
                <li>888</li>
                <li>999</li>
            </ul>
        </ul>

    </div>
    <ul class="tab">
        <li class="l1">
            <input type="button" value="bt1">
            <input type="button" value="bt2">
            <input type="button" value="bt3">
            
        </li>
        <li class="l2">
            <div>content1</div>
            <div>content2</div>
            <div>content3</div>
        </li>
        
    </ul>
    

</body>
</html>

运行效果：

在这里插入图片描述

lealiujj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML层级菜单和选项卡练习

总结：实现原理：本质是通过Jquery代码来设置菜单元素点击时给内容应用不同的css样式来实现。通过给元素动态增加类名去除类名来实时更新对应的类选择器样式。css部分：菜单内内容通过css样式中的display属性默认设置为隐藏display: none，新建一条样式选择器，通过class来选择元素，设置该样式的display属性为显示display: block。这里是对同一个样式属性di...
复制链接

扫一扫