點(diǎn)擊li跳轉(zhuǎn)頁(yè)面并添加class

1.1跳轉(zhuǎn)頁(yè)面同時(shí)添加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])表示第一個(gè)xhtml
           $e = $(".bottombox").find('.'+ localName[1]);
           $e.addClass('activer').siblings().removeClass('activer');
// 特殊情況栋猖,但第一個(gè)相同,第二個(gè)不等于conbine時(shí)姨涡,做判斷
    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%;
} 
Paste_Image.png
1.2跳轉(zhuǎn)頁(yè)面同時(shí)添加activer并傳入?yún)?shù)
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');
    });
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌盼玄,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件潜腻,死亡現(xiàn)場(chǎng)離奇詭異埃儿,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)砾赔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來青灼,“玉大人暴心,你說我怎么就攤上這事≡硬Γ” “怎么了专普?”我有些...
    開封第一講書人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)弹沽。 經(jīng)常有香客問我檀夹,道長(zhǎng)筋粗,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任炸渡,我火速辦了婚禮娜亿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蚌堵。我一直安慰自己买决,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開白布吼畏。 她就那樣靜靜地躺著督赤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪泻蚊。 梳的紋絲不亂的頭發(fā)上躲舌,一...
    開封第一講書人閱讀 51,443評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音性雄,去河邊找鬼没卸。 笑死,一個(gè)胖子當(dāng)著我的面吹牛毅贮,可吹牛的內(nèi)容都是我干的办悟。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼滩褥,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼病蛉!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起瑰煎,我...
    開封第一講書人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤铺然,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后酒甸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體魄健,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年插勤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了沽瘦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡农尖,死狀恐怖析恋,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情盛卡,我是刑警寧澤助隧,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站滑沧,受9級(jí)特大地震影響并村,放射性物質(zhì)發(fā)生泄漏巍实。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一哩牍、第九天 我趴在偏房一處隱蔽的房頂上張望棚潦。 院中可真熱鬧,春花似錦姐叁、人聲如沸塑崖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)贞间。三九已至,卻和暖如春处窥,著一層夾襖步出監(jiān)牢的瞬間嘱吗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工滔驾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留谒麦,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓哆致,卻偏偏與公主長(zhǎng)得像绕德,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子摊阀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案耻蛇? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評(píng)論 1 92
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺,特此分享以備自己日后查看胞此,也希望更多的人看到...
    小小字符閱讀 8,164評(píng)論 7 35
  • 那個(gè)蹲在街角抽煙的人臣咖,公園里寂寞地蕩著秋千的人,深夜在夜店醉酒嘔吐的人漱牵,路邊長(zhǎng)椅上拿著手機(jī)哭泣的人夺蛇,隔壁遭受家暴默...
    鹿淵溪閱讀 184評(píng)論 2 0
  • 新聞界出了個(gè)“一點(diǎn)資訊”刁赦,讓諸多寫手欲罷不能! 眾生眼里有了“二個(gè)文化”闻镶,讓世人取長(zhǎng)補(bǔ)短學(xué)習(xí)甚脉! 商界傳奇驚現(xiàn)“三駕...
    梁靜_4bef閱讀 106評(píng)論 0 0
  • 房子的裝修一般是按自己的喜好和舒適度來才是最好宦焦,畢竟自己才是使用者发钝,時(shí)間長(zhǎng)了也不會(huì)覺得看得煩心顿涣。下面集小二與您分享...
    集一設(shè)計(jì)閱讀 355評(píng)論 0 0