js根据URL设置网站统一导航。

flask系列---模板的继承及Bootstrap实现导航条(四) 在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条、侧边栏等,我们可以使用模板的继承,避免重复编写html代码。现在我们打算实现一个在网页上方的导航条,并在所有的页面中继承这个导航条。导航条的建立,我们直接使用Bootstrap提供的如下导航条的样式。 但在使用Bootstrap的导航条样式之前,需要先引用Bootstrap所需要的css和js文件以及jQuery,我们在html... 阅读详情

有很多网站的导航都是统一的。不过,为了提高用户体验,当前页面对应导航链接要与其他要栏目有点区别,这样能很好让用户知道当前在哪个页面。

如下图:

为了做这个效果,以往我们都会为不同的页面做对应导航。现在我们通过JS可以实现这个效果。


$(function(){

    setcur();

});



function setcur()
{
url=document.URL;
a=url.split("/");
str=a[(a.length-1)];
    if (str.indexOf("index")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(0)").attr("id","menu-now");
        return;
    }
    if (str.indexOf("about")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(1)").attr("id","menu-now");
        return;
    }
    
    
    
    if (str.indexOf("product")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(2)").attr("id","menu-now");
        return;
    }
    
        if (str.indexOf("pinpai")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(2)").attr("id","menu-now");
        return;
    }

    
    
    
    if (str.indexOf("news")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(3)").attr("id","menu-now");
        return;
    }
    

    
    
    
     // alert(str.indexOf("33"));
    if (str.indexOf("baike")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(4)").attr("id","menu-now");
        return;
    }
    if (str.indexOf("zhaopin")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(5)").attr("id","menu-now");
        return;
    }
    
    
    
    else
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(0)").attr("id","menu-now");
        return;
    }
    
    
    
}

HTML导航栏设计与实例解析 nav><a>嵌套列表(Nested Lists),在HTML中,是指在一个列表(<ul>或<ol>)内部嵌套另一个列表。这种结构在创建下拉菜单导航栏时非常有用,因为它允许我们以清晰的层级形式组织链接,使得用户界面更加直观和易于导航。嵌套列表让网站可以展示多级菜单,这在现代网站设计中是一个常见的需求。嵌套列表能够以父子级关系展示导航选项,用户可以通过展开顶级菜单项来查看与之相关的子菜单项,这为用户提供了更加丰富的导航体验,尤其适用于内容结构复杂,需要细分分类的网站。 阅读详情

相关推荐

大话西游2单机版V8一键架设教程:5分钟搞定GM权限和仙玉修改(附完整物品代码表)

本文详细讲解了大话西游2单机版V8的一键架设教程,包括5分钟快速配置GM权限、仙玉修改及物品代码使用技巧。通过分步指导和服务端配置详解,帮助玩家轻松掌握游戏管理功能,重温经典回合制体验。附完整物品代码表,助你快速获取稀有道具和神兽。

weixin_42557830的博客 1233

wordpress 自定义分类url 重写_WordPress导航主题-WebStack导航主题

8月份写了一个导航主题,陆陆续续更新了十几版,功能自认已经很完善了,知乎也注册很久了,在这水片文章。首页截图预览地址一为忆 - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站,定时更新分享优质产品设计书签。​nav.iowen.cn环境要求WordPress 4.4+WordPress 伪静态PHP 5.7+ 7.0+安装指南安装 WordPress ,教程百度设置伪静# N...

weixin_39942992的博客 591

量化爬虫实战:手把手教你搞定同花顺问财的hexin-v参数(附JS逆向思路与Cookie Hook技巧)

本文详细解析了如何通过JS逆向技术获取同花顺问财平台的`hexin-v`参数,包括Cookie Hook技巧和完整解决方案架构。从环境搭建到参数定位,再到生成逻辑逆向,手把手教你突破数据获取限制,为量化交易提供可靠数据支持。

weixin_42557803的博客 398

配置全局的导航栏样式(微信开发)

about中的json: weekly中的json: 其实,可以删除about和weekly中json中方框标记的东西,可以把他写在app.js中设置全局的样式:

BigData 964

基于51单片机+SYN6288语音播报

51单片机控制SYN6288语音播报资料SYN6288模块原理图语音合成命令接线如何接线实现原理程序代码main.csyn6288.cuart.cdelay.c基于 51单片机的其他项目基于51单片机+遥控灯基于51单片机+LCD1602显示基于51单片机+红外遥控解码+LCD1602显示基于51单片机+DHT11温湿度+LCD1602显示基于51单片机+DS18B20温度测温器+LCD1602显示尾声 资料 我用的是绿深电子技术的模块,资料也挺齐全的。也有相关例程。 SYN6288模块原理图 语音合成

weixin_47457689的博客 3万+

智能客服系统知识库构建:长尾问题解决方案全解析

智能客服系统知识库构建:长尾问题解决方案全解析

嗨,欢迎来到我的 优快云 博客小天地!一名深耕多年的技术发烧友。在这里,我将把日常工作中积累的宝贵经验,从复杂架构设计的精妙之处,到代码优化的实战技巧,毫无保留地分享给大家。 4112

js统一链接管理(代码)

情景: ajax提交数据到http://www.alan.com?name=alan&amp;amp;amp;amp;age=18; 现有参数: path = http://www.alan.com params={‘name’:’alan’,’age’:’18’} 需求:需要整个path和params成http://www.alan.com?name=alan&amp;amp;amp;amp;age=18 代码: buildW...

Alan_seeker的博客 1051

告别SquareLine!用免费的NXP GUI-Guider为海思3516AV300开发LVGL界面(附完整移植流程)

本文详细介绍了如何利用免费的NXP GUI-Guider工具为海思Hi3516AV300开发LVGL界面,包括环境配置、代码移植和性能优化等全流程实战指南。特别针对二维码组件缺失等常见问题提供解决方案,帮助开发者零成本构建高效嵌入式GUI系统。

weixin_28292761的博客 416

页面搜索 js html 高亮 定位,js实现不同页面导航菜单高亮显示

这段时间在做一个网站的导航,需要用到不同页面的高亮效果,搜索了网上的一些信息,用js实现了需要的效果,现在整理一下跟大家分享了。当然,我们在做导航的时候,都是由程序直接输出当前的页面的高亮状态的样式,我们只需要定义好输出的类的高亮的样式就可以了,这样是最直接有效也是最常用的方法。但有时候,我们在程序里进行包含的文件的时候,如统一的头部和底部,这时候统一的头部中有一个这样的导航,如果没有给目前所在的...

weixin_42358409的博客 586

高通蓝牙学习-- 关于Android 蓝牙的介绍

本文详细介绍了AOSP蓝牙架构及高通QCA芯片的蓝牙功能实现方案。主要内容包括:1)AOSP蓝牙架构在不同Android版本中的层次结构,重点分析BTHIDL层和libbt-vendor关键组件;2)QCA芯片的引导流程说明;3)两种获取libbt-vendor源码的方式(Google官方源和国内镜像源);4)针对QCA6595/6696/66x8/67x7芯片的具体实现方案,包括固件文件定义、厂商事件处理和补丁下载流程;5)蓝牙调试方法,包括logcat日志分析、HSU和Ellisys硬件跟踪技术。文章为

专业开发者的博客,一个从事Android WiFi和蓝牙的工程师 495

web渗透学习手册

依据多年的渗透测试项目经验及个人理解,对漏洞分类

渗透之路,攻防之间皆学问 1万+

大学生HTML期末大作业——HTML+CSS+JavaScript游戏网站(英雄联盟)

HTML+CSS+JS【游戏网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

... 3778

数仓建模—维度建模之维度表

首先要学会识别维度,维度是相对稳定的、可抽象具有共性的、固有的(天然的)描述度量或事实的上下文属性信息,失去维度信息的度量信息是没有意义的或者说是失去维度信息的事实表是没有意义的。其次要掌握维度表的设计原则和设计流程,从而更加科学的设计维度表,其实这些东西都是术,我们一直都说一句话大道至简,其实如果你掌握了精髓,抛开这些术也可以做到得心应手,这就像张无忌练太极剑一样,忘记了才能达到道的境界,也就是无我,如果做不到就记住这些原则加以应用从而达到术的境界。

2401_84052244的博客 4363

<Project-23 Navigator Portal> Python flask web 网站导航应用 可编辑界面:添加图片、URL、描述、位置移动

注:第一次使用这 app 代码,会因为缺失图片文件,而可能显示如下:撕裂的文件。

davenian的博客 1434

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

js控制公共模板中,不同页面中的导航选中效果-判断当前的url

用js的做法也很多。比较推荐的方法是判断当前的url,然后根据url在nav中的位置,来对nav中的某个导航增加选中样式,代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&gt...

weixin_34050005的博客 341

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

网站结构优化怎么做?

网站结构优化对提升SEO效果至关重要,包括树形结构搭建(如3级目录法则、导航设计等)、URL规范化、内链优化等,能助力搜索引擎抓取与用户体验,带来流量和收益增长。

GlobalWise的博客 2062

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

网站目录结构

|--admin   (网站的管理后台) |--css    (样式) |--js     (javascript脚本)  |--images  (图片) |--inc或includes或core (整站的公共文件或配置文件) |--user文件夹 |--index.php   对建立目录结构提出以下几条原则性建议: 1、不要将网站制作所有文件都存放在根目录下。有的制作...

weixin_33982670的博客 3714

大学生HTML期末大作业——HTML+CSS+JavaScript美食网站

HTML+CSS+JS【美食网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

... 3825

Pennywise核心组件解析:WebView、导航栏与设置模块的实现原理

Pennywise是一款跨平台应用程序,能够将任何网站或媒体以浮动窗口形式打开,为用户提供便捷的多任务处理体验。本文将深入解析其核心组件——WebView、导航栏与设置模块的实现原理,帮助开发者和用户更好地理解这款工具的内部架构。 ## 一、WebView组件:内容渲染的核心引擎 WebView是Pennywise实现网页和媒体内容展示的核心组件,负责加载和渲染外部资源。在项目中,WebVie

gitblog_02618的博客 897

JavaScript篇:深入解析URL结构:前端开发者必备的网址知识

作为前端开发者,我们每天都在与URL打交道,但你真的了解它的每一部分吗?本文将全面解析URL的组成结构,帮助你掌握这一基础但至关重要的知识点。

欢迎来到我的前端博客!这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例,帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者,这个博客都适合你。 1127

网络营销之网站结构

合理的网站结构组成 合理的网站结构主要包含以下几点: 通过首页可以到达任何一个一级栏目首页、二级栏目首页以及最终内容页面; 通过任何一个网页可以返回上一级栏目页面,并逐级返回首页; 主栏目清晰并且全站统一; 通过任何一个网页可以进入任何一个一级栏目首页。 一般网站结构最好就是树状结构,建议链接层数不超过3层,这样用户体验好,而且利于蜘蛛爬行,太深蜘蛛就不利于蜘蛛爬行,百度就会让蜘蛛直接跳出网站,这样收录内容肯定少了很多。 内容尽可能用文字形式表现,如果非要使用到图片或者Flash也要加个标签,说明文字,

暖光的博客 924

2.网站结构优化

SEO网站结构优化,主要包含了url优化,目录结构优化,网站导航优化以及robots文件和网站地图sitemap文件等的优化

一只胡萝卜 266

大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站(西藏)

HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

... 3390

大学生HTML期末大作业——HTML+CSS+JavaScript学校网站(深圳大学)

HTML+CSS+JS【学校网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

... 4531

HTML期末大作业(HTML+CSS+JavaScript响应式游戏资讯网站bootstrap网页)

🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频音频元素,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保

HTML网页设计 931
上一篇: js按格式输出当前日期
下一篇: svn 服务器端同步钩子代码
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值