当前位置:首页 > 技术教程>

jquery/js当前URL对当前栏目高亮突出显示的两种方案

发表日期:2020-01-15 19:41:05文章编辑:池州网站建设浏览次数:7109 标签:    

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";
    }
}

全站导航

其他新闻

二级域名绑定栏目 服务器批量配置二级域名

想做个全国城市站,实现 一个栏目就是一个城市名,一个城市名就用一个二级域名...

日期:2020-12-09

帝国CMS搜索结果标红显示

list.var 支持代码打勾 $searchid = (int)$_GET[&#39;searchid&#39;]; $s...

日期:2020-11-22

帝国CMS全站电脑端自动调整手机端动态静态代码

页面头部 JS代码在body前面加上以下HTML源代码 <script type="text/javascr...

日期:2020-11-22

免费CDN静态资源公共库小记

一般都是无视掉的,长期放本地,但是奈何现在的公共库越来越强大(模板依赖越来越...

日期:2020-09-28

帝国CMS模板灵动标签调用同级栏目导航,带当前栏目高亮判断

代码如下:其中hover为当前栏目判断CSS高亮样式![e:loop={"select classname,c...

日期:2020-01-15

客户案例

南京某环境治理公司手机响应式网站(基于bootstarp和帝国CMS)

网站首页有部分延迟加载的内容,截图的时候没有全部截下来。各位可以直接到对...

日期:2019-09-23

池州某信息技术服务公司网站

网站使用的是PC+移动端判断跳转的。主色调为蓝色,突出科技主题,呈现服务宗旨...

日期:2019-06-18

池州某加工生产企业工程公司官方网站

...

日期:2019-05-26

某县生产力促进中心官方网站

...

日期:2019-05-26

广东中山某大型机械工程公司官方网站

这是广东一家大型进出口机械设备制造公司,实力雄厚。网站是响应式的。客户对...

日期:2018-11-06