金鱼眼

抄代碼|jquery實現帝國cms當前導航高亮的實踐演練

帝國cms的當前導航高亮

想要實現帝國cms的當前導航高亮功能(注:導航的html結構不是用靈動標簽調用的欄目名稱動態提取的,而是寫死的),結果大費周章,抄了五六段jquery代碼后都沒有搞定,哥幾乎要哭了。

要哭了

好在最后終于實現了帝國cms當前導航的高亮效果。如下:

當前導航高亮效果

如果沒有成功,并不是網上的jquery代碼有問題,而是沒有套對套準。要想成功,需要html結構、css樣式和jquey代碼三者都耦合到位才成。

放在頁面頭部模板的導航html結構:

<div class="nav" >
 <div class="clearfix content_gy">
 <div class="left"> <img src="/skin/custom/images/logo_pic.png" alt=""/> </div>
 <div class="right">
 <p class="clearfix top"> <span class="span1">全國免費咨詢電話:</span> <span class="span2">137-1842-6927</span> </p>
 <ul class="right_ul clearfix">
 <li ><a href="/index.html" rel="/index.html"><span class="span1">首頁</span><span class="span2">Home</span></a></li>
 <li><a href="/case/" rel="/case/"><span class="span1">品牌案例</span><span class="span2">Case</span></a></li>
 <li><a href="/about.html" rel="/about.html"><span class="span1">匠心筑龍</span><span class="span2">Zhu long</span></a></li>
 <li><a href="/flow.html" rel="/flow.html"><span class="span1">服務流程</span><span class="span2">Flow</span></a></li>
 <li><a href="/news/" rel="/news/"><span class="span1">新聞動態</span><span class="span2">News</span></a></li>
 <li><a href="/contact.html" rel="/contact.html"><span class="span1">聯系我們</span><span class="span2">Contact US</span></a></li>
 </ul>
 </div>
 </div>
</div>

對應的css:

.nav .right ul li a.active span{color: #d26400;}

底部模板的jquery代碼:

<script type="text/javascript">
 var urlstr = location.href;
 var urlstatus=false;
 $(".nav a").each(function () {
 if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
 $(this).addClass('active'); urlstatus = true;
 } else {
 $(this).removeClass('active');
 }
 });
 if (!urlstatus) {$(".nav a").eq(0).addClass('active'); }
 </script>

代碼的大體意思是通過當前url網址來進行判斷,為當前點擊的菜單增加.active樣式,其他的則移除掉。其他情況則為首頁加上.active樣式。

太多的原理說不清楚,經過實踐并成功的jquery實現帝國cms當前導航高亮,發現要注意以下幾點。

1.a標簽的鏈接代碼,最開始抄的代碼最為簡單明了,可是最終比對發現a的鏈接是假鏈接,即:href=javascript:;而自己實現的導航a是鏈接到不同頁面的;

2.class=”active”的位置,開始是放在上一層,即:<li class=”active”>,沒有測試成功(網上很多jquery實現高亮的代碼是作用在li標簽上,可惜沒有抄成功)。后來參考別的代碼,重新把active放在a標簽上。

3.active放在a標簽上后,對應的css也要調整,以免css失效。

4.jquery代碼照抄就好,不會錯,標紅的“nav a”(兩處)則匹配導航html結構,不容有誤,另外根據代碼,為導航的a標簽添加了rel屬性

測試過程中可以通過瀏覽器的開發者工具觀察查看,發現一些問題所在。

以上jquery代碼實現帝國cms當前導航的高亮效果,實質上這是一種可以通用的效果,并不限制于cms本身。成功了,就記下來備用,省得下次又費時費力去實踐,畢竟,哥只是個代碼搬運工,不是程序員啊。

代碼搬運工

附:另外網上有這樣一種jquery代碼解決方案,但華哥沒有去實踐驗證過。如下:

無需程序代碼支持,只要一段JS代碼就行了。

首先,先加載JQ文件,

然后,在頁面調用以下JS代碼即可:

<script>$(function(){$('a[href="'+window.location.pathname+window.location.search'"]').addClass("hover");})</script><style>a.hover{color:#0071BE; font-weight:bold}</style>

推薦給$(‘a 這個加一個你欄目外層的div的class如 $(‘.class a 這樣能避免其他地方高亮!

本文鏈接:肖運華 » 網站策劃設計制作優化 » 抄代碼|jquery實現帝國cms當前導航高亮的實踐演練
轉載請注明:http://www.nqxrd.club/2206.html

發表評論

電子郵件地址不會被公開。

金鱼眼 57413355779518875942366237647413994931408963703890709686400653170213716128710456074818773485923349 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();