當前位置:首頁 > 技術教程>

jquery/js當前URL對當前欄目高亮突出顯示的兩種方案

發表日期:2020-01-15 19:41:05文章編輯:池州網站建設瀏覽次數:7105 標簽:    

html:

<div class="nav">
        <ul>
            <li><a href="index.html">首 頁</a></li>
            <li><a href="b.html">專家觀點</a></li>
            <li><a href="c.html">課題研討</a></li>
            <li><a href="d.html">研究報告</a></li>
        </ul>
    </div><!--/.nav-->

jquery:

//除了首頁外當前URL對當前欄目高亮突出顯示
    $(".nav li a:not(:first)").each(function(){
        $this = $(this);
        if($this[0].href==String(window.location)){
            $this.parent().addClass("selected");
        }    
    });
//當前URL對當前欄目高亮突出顯示
    $(".sidenav li a").each(function(){
        $this = $(this);
        if($this[0].href==String(window.location)){
            $this.parent().addClass("selected");
        }    
    });

或者原生js:

//js 當前URL對當前欄目高亮突出顯示
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++){
    var links = myNav[i].getAttribute("href");
    var myURL = document.location.href;
    if(myURL.indexOf(links) != -1){
        myNav[i].parentNode.className="selected";
    }
}

全站導航

其他新聞

帝國CMS模板靈動標簽調用同級欄目導航,帶當前欄目高亮判斷

代碼如下:其中hover為當前欄目判斷CSS高亮樣式![e:loop={"select classname,c...

日期:2020-01-15

jquery/js當前URL對當前欄目高亮突出顯示的兩種方案

html:<div class="nav"> <ul> <li><a href="index.htm...

日期:2020-01-15

帝國CMS模板js代碼實現某字段還剩幾天過期的效果

<script> function CheckInfoDate(infodate){ var today=new Date().getT...

日期:2020-01-15

帝國cms給最近新文章有new圖標

<ul> [e:loop={欄目ID,顯示條數,操作類型,只顯示有標題圖片}] <? $newimg="...

日期:2019-10-21

帝國CMS靈動標簽調用專題信息

帝國CMS內置的專題調用標簽總是不理想,調用不方便,還是靈動標簽調用來得方便...

日期:2019-09-14

客戶案例

南京某環境治理公司手機響應式網站(基于bootstarp和帝國CMS)

網站首頁有部分延遲加載的內容,截圖的時候沒有全部截下來。各位可以直接到對...

日期:2019-09-23

池州某信息技術服務公司網站

網站使用的是PC+移動端判斷跳轉的。主色調為藍色,突出科技主題,呈現服務宗旨...

日期:2019-06-18

池州某加工生產企業工程公司官方網站

...

日期:2019-05-26

某縣生產力促進中心官方網站

...

日期:2019-05-26

廣東中山某大型機械工程公司官方網站

這是廣東一家大型進出口機械設備制造公司,實力雄厚。網站是響應式的??蛻魧?..

日期:2018-11-06

下载麻将游戏四人麻将 内蒙古十一选五开奖结果查询 买个车放婚庆到底赚不赚钱 排列5直播 龙王捕鱼技巧 彩票36选7怎么算中奖 今天的双色球现场直播 体彩陕西十一选五开 30选5 麻将 单机版 无需网络 彩票免费计划软件app 河南十一选五玩法介绍 江苏时时彩规则 黑龙江6+1 象棋开局 山西省11选5开奖结果 时时彩组三全包赚钱吗