web导航栏点击跳转后的样式

搭建web网页的导航栏时,需要有点击某导航页面跳转后,被点击的<a>标签样式添加或改变(bootstrap只能实现页面不刷新的点击效果),网上查阅了很多,终于解决了问题,豁然开朗的同时也小总结一下:

ps:以下为摘录百度知道,并非本人原创,而我用的便是其中第二种方法。

方法有很多,大体可分为三种:

一、在服务器端判断当前页面隶属于哪一个分类,然后对其进行高亮化,这个高亮化的方法也有很多,相信不是你要的,不一一讲解;

二、每一个页面这个导航条都在各自的页面内,那么独立对其分配class或者行内样式也是完全可以的。

三、通过JavaScript,在导航条元素加载完成之后,就对URL进行判断分析,或者是分析其它由服务器放置在页面内的隐藏标志位,然后对其高亮化。

以上三种中,第二种是最常见的,因为大多数站的每个导航分类下,页面的结构都不同了,使用独立的导航条也不会有什么影响。

第一种缺点是需要服务器对本页面的分类进行判断分析,会消耗一定的CPU资源

第二种的缺点是每一个分类页中都要有自己独立的导航条,会占用磁盘空间(这个有点太叫真了)

第三种的缺点是,用户在打开网页之后,在浏览器缓冲阶段,会看不到高亮,等页面加载完或导航条加载一段时间之后,才会变成高亮,有一个时间延迟。
时间: 2024-12-26 21:21:37

web导航栏点击跳转后的样式的相关文章

ios 导航栏 点击barbutton的按钮 下拉列表

环境:xocde5.0.2+ios7.0.1 1.导航栏 ----点击科目--------下拉列表 代码:NGRightTableViewViewController.h #import <UIKit/UIKit.h> @protocol PulldownMenuDelegate -(void)menuItemSelected:(NSIndexPath *)indexPath; -(void)pullDownAnimated:(BOOL)open; @end @interface NGRigh

左侧竖条导航栏点击出现效果的实现

大部分的网站导航栏都是在网页的顶端,这类导航栏看起来非常一般,而有些在左侧竖着显示的导航栏就比较好看一些了,但是今天为大家介绍的是左侧竖条导航栏实现点击出现的效果,也就是刚开始只显示导航,不显示分类栏,而点击导航就可以显示分类栏了,下面一起来看下源代码的实现吧.<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="

React实现导航栏点击高亮

在jquery中实现导航栏的切换只需要一行代码找到同级其他元素removeClass以及添加点击元素addClass就可以实现了,但是React没法直接找到同级元素,这个时候需要一点js中的思维,根据添加的序列号判断该添加哪种className 为了方便实例测试,这个我直接引用了菜鸟教程的在线文件,可以直接将代码粘贴运行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <

导航栏设置了背景图片后恢复默认

// 背景图恢复默认 [self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; // 底部线恢复默认 self.navigationController.navigationBar.shadowImage = nil; // 样式恢复默认 self.navigationController.navigationBar.barStyle = UIBarSty

ios导航栏又按钮添加图片后使其保持原色

UIBarButtonItem *rightBarItem = [[UIBarButtonItem alloc] initWithTitle:nil style:UIBarButtonItemStylePlain target:self action:@selector(addItemmmClick)]; self.navigationItem.rightBarButtonItem = rightBarItem; [self.navigationItem.rightBarButtonItem s

jquery导航栏html页面跳转导航字体变色

html代码: <div class="collapse"> <ul class="nav"> <li><a href="index.html" class="active">首页</a></li> <li> <a href="team.html"> 商务合作</a></li> <l

elementUI 导航栏点击之后改变背景色,背景色悬停

一开始设置的是: .menuLeft .el-menu-item:hover{ background: #6db6ff !important; } .menuLeft .el-submenu__title:hover { background: #6db6ff !important; } 但它只是hover事件,并不会使背景色悬停,一直存在.后来又设置了: .menuLeft .el-menu-item.is-active { background: #6db6ff !important; }

黄聪:jquery mobile通过a标签页面跳转后,样式丢失、js失效的解决方法

问题描述: 用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 解决办法1: 将所有的css以及js全部放在div内. 原理: 由于jqm的ajax跳转的时候,只会把b.html中内的内容加载进dom,而外的代码都不会加载,所以导致在外的js和css都失效了. 解决办法1: 在header设置全局属性. <script>$.mobile.ajaxEnabled = false;</script> 原理: 全局禁止jqm使用ajax

织梦导航 currentstyle 点击li添加class类 样式

<!--导航开始--> <div class="global_nav_wrap"> <ul class="nav nav-pills"> <li{dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='nav-current'":@me="";{/dede:field}> &l