如图所示 代码如下图:

特别要注意的是: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. 响应式布局【3】 --- bootstrap

    本片文章主要讲解Bootstrap中如何实现响应式布局的. 参考资料&内容来源: https://code.ziqiangxuetang.com/bootstrap/bootstrap-gri ...

  2. Java使用到的常用类总结

    基本类型 常用:int.long.double.boolean. 不常用:byte.float.char.short

  3. synchronized同步关键字

    参考:http://blog.csdn.net/luoweifu/article/details/46613015 synchronized是Java中的关键字,是一种同步锁.它修饰的对象有以下几种: ...

  4. ddchuxing——php面试题及答案

    1.  echo和print的区别 echo没有返回值,print有返回值1,执行失败时返回false:echo输出的速度比print快,因为没有返回值:echo可以输出一个或多个字符串,print只 ...

  5. 快速学习Symfony4,Symfony4教程

    快速学习Symfony4,Symfony4教程https://symfony.com/doc/current/index.html 关注公众号回复Symfony4教程,Symfony4教程视频,或访问 ...

  6. springmvc fastjson 反序列化时间格式化

    第一种情况是从后台拿到数据,进行反序列化,反序列化格式时间:试了一下很多网上的方法,最后发现还是在实体类上面的日期字段加上如下注解,可以完成格式化操作,否则默认就都是时间戳的格式: @JSONFiel ...

  7. fragment 动态加载

    /** * 测试使用Fragment(动态使用) 1. * 使用FragmentManager和FragmentTransaction动态使用一个Fragment 2. 方式: * add(viewI ...

  8. IOS 长姿势---双击Home键

    这不值得大惊小怪,因为按两次Home键后,苹果只是简单第提供了一个历史任务列表,而不是人们以为的当前任务列表——这在苹果网站上已经说得很清楚了.至于为什么苹果没有能力为用户提供一个“任务管理器”,我们 ...

  9. cdcqの省选膜你赛 题解

    题解: 第一题: 有一个很明显的性质:后面的修改不会对前面的询问做出影响,CDQ分治套上BIT即可. 第二题: 有一个类似于斜率的形式,分数规划套上树分治,码量稍大,细节稍多. 最后20W的点出题人原 ...

  10. ubuntu上swift开发学习2

    使用包管理器(package manager)创建一个可执行的项目 1. 创建一个Hello目录,然后进入目录 $ mkdir Hello $ cd Hello 2. 使用包初始化命令,参数表示创建一 ...