点击实现CSS样式切换
如图所示 代码如下图：
特别要注意的是：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样式切换的更多相关文章
- Js 通过点击改变css样式
通过js 点击按钮去改变目标原始的背景颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
- css样式表。作用是美化HTML网页.
样式表分为:(1)内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余多. 如:<p style="font-size:10px">内联样式表</p&g ...
- 项目遇到的小问题（关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答）
第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...
- ASP.NET重写Render 加载CSS样式文件和JS文件(切换CSS换皮肤)
网页换皮肤的方式有很多种,最简单的通常就是切换页面CSS,而CSS通常写在外部CSS文件里.那么切换CSS其实就是更换html里的link href路径.我在网上搜索了下. 一般有两种方式: 1.页面 ...
- 下拉框等需要显示上下箭头切换的CSS样式
下拉框等需要显示上下箭头切换的CSS样式 .icon-right, .icon-down, .icon-up { display: inline-block; padding-right: 13r ...
- 进阶实战 css 点击按钮的样式
1. html结构 <div class="menu-wrap"> <input type="checkbox" class="t ...
- Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...
- 使用chrome查看页面元素的css样式
使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...
- div+css样式
Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...
随机推荐
- 【题解】 AT2134 Zigzag MST
[题解]AT2134 Zigzag MST 一道MST好题 \(Anson\)有云: 要么是减少边的数量. 要么是改变连接边的方式. 那么如何减少边的数量呢?很简单,把所有不可能对答案产生贡献的边去掉 ...
- 我的Java开发学习之旅------>求N内所有的素数
一.素数的概念 质数(prime number)又称素数,有无限个.一个大于1的自然数,除了1和它本身外,不能被其他自然数(质数)整除,换句话说就是该数除了1和它本身以外不再有其他的因数:否则称为合数 ...
- HTML5/CSS3动画下拉菜单
在线演示 本地下载
- 如何使用安信可 ESP 系列一体化开发环境【转】
本文转载自:http://wiki.ai-thinker.com/ai_ide_use 关于 Problems 报错 注意:Eclipse 只是一个代码编写工具,它并不能读取 makefile 里面的 ...
- hihocoder(第十周)二叉树（前序中序推后续）递推实现
题目 : 后序遍历 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在参与过了美食节之后,小Hi和小Ho在别的地方又玩耍了一阵子,在这个过程中,小Ho得到了一个非常有意思 ...
- TopCoder SRM420 Div1 RedIsGood —— 期望
题目链接:https://vjudge.net/problem/TopCoder-9915 (论文上的题) 题解: 更正:, i>0, j>0 代码如下: #include <ios ...
- Perl 日期时间函数（date time）
use Time::HiRes qw(time);use POSIX qw(strftime); my $t = time;my $date = strftime "%Y%m%d %H:%M ...
- 机器学习：Colorization using Optimization
今天介绍 Siggraph 2004 年的一篇文章: Colorization using Optimization,利用优化的方法对灰度图像进行着色,这里用到了非常经典的泊松方程以及稀疏矩阵的线性优 ...
- 如何在asterisk中限制呼叫路数
在asterisk中,对于呼叫个数是可以通过call-limit进行限制的.限制办法是通过修改asterisk.conf中maxcalls参数,设置允许的最大呼叫数.这里的最大呼叫数是包括所有的呼 ...
- BZOJ1251 序列终结者（Splay平衡树）（占位）
网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列 要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这样的,真是没技术含量…… ...