您的位置：首页 > Web前端 > JavaScript

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

2016-04-21 19:24 585 查看

效果预览

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();
},
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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航