如图所示 代码如下图：

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

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

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>点击切换Css类</title>

		<style>

			.nav{

				width: 690px;

				height: 80px;

				margin: 0 auto;

				border: 2px solid #0797B5;

			}

			.nav ul li {

				display: inline;

				list-style: none;

			}

			.nav ul li{

				border: 1px solid solid;

				margin: 14px;

			    text-decoration: none;

			    font-size: 20px;

			    padding-bottom: 10px;

			}

			.navClicked{

				font-weight: bold;

				color: #c61919;

				border-bottom: 3px solid #c61919;

				cursor: pointer;

			}

			.nav ul li:hover {

				font-weight: bold;

				color: #c61919;

				cursor: pointer;

			}

		</style>

		<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

		<script>

			// 导航切换

			$(function(){

				//第一种方法

				$(".nav ul li").each(function(index) {

					$(this).click(function() {

						$(".nav ul li").eq(index).addClass("navClicked").siblings().removeClass("navClicked");

					})

				})

				//第二种方法

			  /*$(".nav ul li").click(function(){

					$(this).addClass("navClicked").siblings().removeClass("navClicked");

	            });*/

			});

		</script>

	</head>

	<body>

		<div class="nav">

			<ul>

				<li class="navClicked">首页</li>

				<li>美国留学</li>

				<li>留学咨讯</li>

				<li>院校库</li>

				<li>合作伙伴</li>

				<li>关于我们</li>

			</ul>

		</div>

	</body>

</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. sprint-boot @ComponentScan扫描多个包

    使用@ComponentScan扫描多个包时, @ComponentScan({"ka","com"}) 注意包名不能为org,不然无法启动

  2. API的理解和使用——单线程架构

    核心知识点: 1.单线程机制:所有命令放在一个队列中 2.为什么Redis单线程这么快?内存中执行.非IO阻塞.避免线程切换和竞态产生的消耗. 3.单线程的问题?一个命令不能执行太长时间,不然会阻塞其 ...

  3. chunkhash笔记

    假设有main1.main2两个入口文件,main引入chunk1.chunk2,main2引入chunk1 改变chunk2 main1的chunkhash改变,main2不发生改变 main再引入 ...

  4. win8+sdk8+vs2012+freeglut+glew开发opengl

    写给想要学习opengl的同学们. 刚开始学习opengl的时候,对于整个环境的搭建以及一些概念不太清晰,网上的资料又比较凌乱,因此在此总结一下,方便大家. 首先,是有一个windows系统,我用的是 ...

  5. centos 7 部署 mysql 报错记录

    1. Header V3 DSA/SHA1 Signature, key ID 5072e1f5: NOKEY 这是由于yum安装了旧版本的GPG keys造成的,解决办法就是 引用  rpm --i ...

  6. linux下安装svn服务

    环境centos6.8 64位: 1.安装svn yum install subversion yum install mod_dav_svn 2.创建svn仓库 mkdie /home/svn 3. ...

  7. 解决ini-parser解析ini文件中文乱码问题

    rickyah/ini-parser 是一个.net 平台解析ini文件的库,当ini文件中含有中文字符时会乱码. 解决:将文件通过Editplus 等文本编辑工具保存为 utf-8 + bom 格式 ...

  8. 织梦简洁机械设备dedecms模板

    织梦简洁机械设备dedecms模板,个人网站模板,dedecms模板. 模板地址:http://www.huiyi8.com/sc/7269.html

  9. 使用gdb调试c/c++代码

    转自 http://blog.csdn.net/haoel/article/details/2879 GDB概述———— GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.或许,各位比较 ...

  10. sublime 3好用快捷键

    sublime 3好用快捷键 自己常用 删除行 [ { "keys": ["ctrl+shift+d"], "command": " ...