支持地址栏传值。侧边导航栏html+JS

最新推荐文章于 2023-07-23 11:07:45 发布

安然于心

最新推荐文章于 2023-07-23 11:07:45 发布

阅读量1.4k

点赞数 3

分类专栏： tab切换菜单栏手风琴文章标签： html javascript 导航导航栏 tab切换

本文链接：https://blog.csdn.net/ViVianWhere/article/details/51212272

版权

tab切换同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

菜单栏

1 篇文章 0 订阅

订阅专栏

手风琴

1 篇文章 0 订阅

订阅专栏

效果预览

这里写图片描述

HTML代码

<html>
    <head>
        <meta charset="utf-8" />
        <title>导航栏</title>
        <link rel="stylesheet" href="css/menu.css" />
        <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
        <script type="text/javascript" src="js/menu.0.1.js" ></script>
    </head>
    <body>
        <div class="main_box">
            <ul class="menu_ulbox">
                <li class="menu_libox">
                    <p class="menu_tit menu_titon">订单中心<span class="menu_icon menu_icoup"></span></p>
                    <ul class="menu_ul">
                        <li class="menu_li menu_lion" data-liid="10" data-litit="未付款的订单" data-class="order_nopaybox">未付款的订单</li>
                        <li class="menu_li" data-liid="11" data-litit="已付款的订单" data-class="order_okpaybox">已付款的订单</li>
                        <li class="menu_li" data-liid="12" data-litit="已完成的订单" data-class="order_okbox">已完成的订单</li>
                    </ul>
                </li>
                <li class="menu_libox">
                    <p class="menu_tit">个人中心<span class="menu_icon"></span></p>
                    <ul class="menu_ul" style="display:none;">
                        <li class="menu_li" data-liid="20" data-litit="个人资料" data-class="infor_box">个人资料</li>
                        <li class="menu_li" data-liid="21" data-litit="修改密码" data-class="editpwd_box">修改密码</li>
                        <li class="menu_li" data-liid="22" data-litit="消息设置" data-class="setmsg_box">消息设置</li>
                    </ul>
                </li>
            </ul>
            <div class="menu_conrbox">
                <div class="menu_headbox">
                    <span class="menu_head">未付款的订单</span>
                </div>
                <!--未付款订单-->
                <div class="order_nopaybox"></div>
                <!--已付款订单-->
                <div class="order_okpaybox"></div>
                <!--已完成订单-->
                <div class="order_okbox"></div>
                <!--个人资料-->
                <div class="infor_box"></div>
                <!--修改密码-->
                <div class="editpwd_box"></div>
                <!--消息设置-->
                <div class="setmsg_box"></div>
            </div>
    </div>
    </body>
</html>

CSS代码

@charset "utf-8";
* {margin: 0;padding: 0;}
ul,li {list-style: none;}
body{font-family: "microsoft yahei";font-size: 14px;background-color: #E1E1E1;}
.menu_icon{display: inline-block;width: 13px;height:8px;float: right;background: url(../img/menu_icon.png) no-repeat;background-position: 0 0;margin-right: 15px;margin-top: 12px;}
.menu_icoup{background-position: -13px 0;}
.main_box{width: 980px;margin: 0 auto;margin-top: 80px;}
.menu_ulbox,.menu_libox{width: 260px;float: left;}
.menu_tit{width: 260px;height: 32px;line-height: 32px;font-weight: 600;color: #FFFFFF;background-color: #2e66a2;text-indent: 20px;cursor: pointer;}
.menu_tit:hover{background-color: #6382a2;}
.menu_titon{background-color: #6382a2;}
.menu_li{width: 260px;height: 32px;line-height: 32px;color: #666666;text-indent: 40px;background-color: #ECECEC;cursor: pointer;}
.menu_li:hover{color: #4571A0;background-color: #E7E7E7;}
.menu_lion{color: #4571A0;background-color: #E7E7E7;}
.menu_conrbox{width: 720px;float: right;background-color: #ffffff;}
.menu_headbox{background-color: #2e66a2;width: 720px;height: 60px;}
.menu_head{display: inline-block;width: 110px;height: 55px;line-height: 55px;font-size: 12px;font-weight: 600;color: #666666;text-align: center;background-color: #ffffff;border-top: 5px solid #f96717;}

JS代码

$(function(){
    //预加载
    $(window).ready(function(){
        var k = Menu.GetUrlKey("k");
        if (k != null && k != "")
            Menu.SetMenu(k);
        else
            Menu.BindMenu("未付款的订单","order_nopaybox");
    })
    //左边切换主菜单栏
    $(".menu_tit").on("click",function () {
        if($(this).next(".menu_ul").is(":hidden")){
            $(this).addClass("menu_titon");
            $(this).children(".menu_icon").addClass("menu_icoup");
            $(this).next(".menu_ul").slideDown();
        }else{
            $(this).removeClass("menu_titon");
            $(this).children(".menu_icon").removeClass("menu_icoup");
            $(this).next(".menu_ul").slideUp();
        }
    });
    //左边切换子菜单栏
    $(".menu_ul").on("click","li",function () {
        var dtclass = $(this).attr("data-class");
        var litit = $(this).attr("data-litit");
        $(".menu_li").removeClass("menu_lion");
        $(this).addClass("menu_lion");
        Menu.HideMenu();
        Menu.BindMenu(litit,dtclass);
    });
})
var Menu={
        //绑定右边菜单
        BindMenu:function(litit,dtclass){
            $("."+dtclass).show();
            $(".menu_head").text(litit);
        },
        //隐藏所有容器
        HideMenu:function(){
            $(".order_nopaybox").hide();
            $(".order_okpaybox").hide();
            $(".order_okbox").hide();
            $(".infor_box").hide();
            $(".editpwd_box").hide();
            $(".setmsg_box").hide();
        },
        //切换地址穿key值
        SetMenu:function(keys){
            $(".menu_ul li[data-liid='"+keys+"']").click();
            $(".menu_ul li[data-liid='"+keys+"']").parent(".menu_ul").prev(".menu_tit").click();
        },
        // 获取url上的参数[keys]你要获取的参数
        GetUrlKey:function (keys){
            var reg = new RegExp("(^|&)" + keys + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    }

百度网盘地址

http://pan.baidu.com/s/1hrKNndq
如果有好的建议，请QQ联系我：508774301

安然于心

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
支持地址栏传值。侧边导航栏html+JS

HTML代码<html> <head> <meta charset="utf-8" /> <title>导航栏</title> <link rel="stylesheet" href="css/menu.css" /> <script type="text/javascript" src="js/jquery-1.10.2.mi
复制链接

扫一扫