1.1跳转页面同时添加activer
js
$(document).ready(function(){
[location.pathname]
-- 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/list 返回/xhtml/list
**pathname**,中文"路径名称"
var local = window.location.pathname; //获取url
localName = local.split("/"); //去掉'/' localName([1])表示第一个xhtml
$e = $(".bottombox").find('.'+ localName[1]);
$e.addClass('activer').siblings().removeClass('activer');
// 特殊情况,但第一个相同,第二个不等于conbine时,做判断
if(localName[2] != 'combine'){
$e.addClass('activer').siblings().removeClass('activer');
}else{
$(".li2").addClass('activer').siblings().removeClass('activer');
}
})
html
<div class="bottombox">
<ul>
<li class="li1 index goods activer" onclick="go('/index')">
</li>
<li class="li2" onclick="go('/goods/classify')" data-local="">
</li>
<li class="li3 like" onclick="go('/like/list')">
</li>
<li class="li4 user order cart address" onclick="goIfLogin('/user/detail')">
</li>
<li class="li5 service" onclick="go('/service/list')">
</li>
</ul>
</div>
css
.bottombox {
z-index: 0;
width: 100%;
height: auto;
position: fixed;
bottom: 0;
background-color: #F0F0F0;
text-align: center;
border-top: 1px solid #cacaca;
}
.bottombox li {
float: left;
width: 20%;
padding: 7% 0;
font-size: 10px;
font-weight: bolder;
color: #a9a9a9;
border-right: 1px solid #cacaca;
box-sizing: border-box;
cursor: pointer;
position: relative;
background-size: 100% auto;
}
.bottombox li:after{
display: block;
content: ".";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.bottombox li:first-child:after {
border-left: 0;
background: url('/images/APPicon/tab/fa_icon.png') center center no-repeat;
background-size: 100% 100%;
}
.bottombox li.activer:first-child:after{
border-left: 0;
background: url('/images/APPicon/tab/fa_icon1.png') no-repeat;
background-size: 100% 100%;
}
1.2跳转页面同时添加activer并传入参数
functionn go(url){
location.href = url + '?invitation=' + $("#dealerName").val();
}
<a href="javascript:void(0);" onclick="go('/ctive/aaaa')" data-url="/ctive/aaaa">aaaa</a>
<a href="javascript:void(0);" onclick="go('/ctive/bbb')" data-url="/ctive/bbbb">bbbb</a>
<a href="javascript:void(0);" onclick="go('/ctive/cccc')" data-url="/ctive/cccc">cccc</a>
$('.left_nav_act a').each(function () {
if ($(this).attr("data-url") == String(window.location.pathname))
$(this).addClass('activerA');
});