如图所示 代码如下图：

特别要注意的是：a标签不会继承上级的color，所以要单独为其设置

参看代码(并非上图代码)如下：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>点击切换Css类</title>
  6. 		<style>
  7. 			.nav{
  8. 				width: 690px;
  9. 				height: 80px;
  10. 				margin: 0 auto;
  11. 				border: 2px solid #0797B5;
  12. 			}
  13. 			.nav ul li {
  14. 				display: inline;
  15. 				list-style: none;
  16. 			}
  17.  
  18. 			.nav ul li{
  19. 				border: 1px solid solid;
  20. 				margin: 14px;
  21. 			    text-decoration: none;
  22. 			    font-size: 20px;
  23. 			    padding-bottom: 10px;
  24. 			}
  25. 			.navClicked{
  26. 				font-weight: bold;
  27. 				color: #c61919;
  28. 				border-bottom: 3px solid #c61919;
  29. 				cursor: pointer;
  30. 			}
  31.  
  32. 			.nav ul li:hover {
  33. 				font-weight: bold;
  34. 				color: #c61919;
  35. 				cursor: pointer;
  36. 			}
  37. 		</style>
  38. 		<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
  39. 		<script>
  40. 			// 导航切换
  41. 			$(function(){
  42. 				//第一种方法
  43. 				$(".nav ul li").each(function(index) {
  44. 					$(this).click(function() {
  45. 						$(".nav ul li").eq(index).addClass("navClicked").siblings().removeClass("navClicked");
  46. 					})
  47. 				})
  48.  
  49. 				//第二种方法
  50. 			  /*$(".nav ul li").click(function(){
  51. 					$(this).addClass("navClicked").siblings().removeClass("navClicked");
  52. 	            });*/
  53. 			});
  54. 		</script>
  55.  
  56. 	</head>
  57. 	<body>
  58. 		<div class="nav">
  59. 			<ul>
  60. 				<li class="navClicked">首页</li>
  61. 				<li>美国留学</li>
  62. 				<li>留学咨讯</li>
  63. 				<li>院校库</li>
  64. 				<li>合作伙伴</li>
  65. 				<li>关于我们</li>
  66. 			</ul>
  67. 		</div>
  68. 	</body>
  69. </html>

　　效果图如下：

转自博客：https://blog.csdn.net/qq_39588630/article/details/82800343

　　

点击实现CSS样式切换的更多相关文章

  1. Js 通过点击改变css样式

    通过js 点击按钮去改变目标原始的背景颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  2. css样式表。作用是美化HTML网页.

    样式表分为:(1)内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余多. 如:<p style="font-size:10px">内联样式表</p&g ...

  3. 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  4. ASP.NET重写Render 加载CSS样式文件和JS文件(切换CSS换皮肤)

    网页换皮肤的方式有很多种,最简单的通常就是切换页面CSS,而CSS通常写在外部CSS文件里.那么切换CSS其实就是更换html里的link href路径.我在网上搜索了下. 一般有两种方式: 1.页面 ...

  5. 下拉框等需要显示上下箭头切换的CSS样式

    下拉框等需要显示上下箭头切换的CSS样式   .icon-right, .icon-down, .icon-up { display: inline-block; padding-right: 13r ...

  6. 进阶实战 css 点击按钮的样式

    1.  html结构 <div class="menu-wrap"> <input type="checkbox" class="t ...

  7. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

  8. 使用chrome查看页面元素的css样式

    使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...

  9. div+css样式

    Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...

随机推荐

  1. 查看SqlServer安装的log文件

    SqlServer安装时产生的log被保存在这个目录下: "%programfiles%\Microsoft SQL Server\[SQL_VERSION]\Setup Bootstrap ...

  2. PHP接口中的静态变量、常量与类中静态变量、常量的区别

    接口: 1 不能够定义静态变量(常量除外) 2 定义的常量 const YOUCONST = VALUE,不能在子类中覆盖,在子类中以 interfaceName::YOUCONST的方式调用 3 不 ...

  3. 二维码图片流转base64

    @RequestMapping(value = "/weChatImage",method = RequestMethod.GET)public Response weChatim ...

  4. Algorithm: pattern searching

    kmp算法:用一个数组保存了上一个需要开始搜索的index,比如AAACAAA就是0, 1, 2, 0, 1, 2, 3, ABCABC就是0, 0, 0, 1, 2, 3,复杂度O(M+N) #in ...

  5. YxdJSON - Delphi 高性能 JSON 库（支持RTTI和序列化操作）

    源:YxdJSON - Delphi 高性能 JSON 库(支持RTTI和序列化操作) Delphi 高性能 JSON 库(支持RTTI和序列化操作) 支持平台: Windows, Android, ...

  6. python 安装coreml

    2.安装pip,  下载get-pip.py, https://bootstrap.pypa.io/get-pip.py,然后Python 这个文件,如果没有权限就加sudo 3.安装coreml:这 ...

  7. 一次跨域请求出现 OPTIONS 请求的问题及解决方法

    问题背景浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 在前后端开发过程经常会遇到跨域问题.网上也都有解决方案. 写这篇文章时,我们碰到的一个场景是:要给s系统做一 ...

  8. 构建工具是如何用 node 操作 html/js/css/md 文件的

    构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说,html/js/css/md ... 源代码文件都是文本文件,文本文件的内容都是字符串,对文本文件的操作其实就是对 ...

  9. gVIM+zencoding快速开发HTML/CSS/JS（适用WEB前端）

    一.真正解决了UTF-8中文乱码的各种问题(菜单乱码,内容乱码,提示信息乱码),不用担心WIN用默认编码写的东西在Linux乱码,或在Linux(zh_CN.UTF-8时)写的东西在WIN下乱码.在A ...

  10. html5--1.10绝对路径和相对路径

    html5--1.10绝对路径和相对路径 学习要点: 绝对路径和相对路径 1.绝对路径 需要指出链接资源的绝对位置,与你的HTML文档的位置无关: 1. 服务器中的位置:href="http ...