开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

左侧导航点击之后用js改变字体颜色

在Web开发中，使用JavaScript来改变页面元素的样式是一种常见的需求。以下是关于如何实现左侧导航点击后改变字体颜色的详细解答：

基础概念

DOM（文档对象模型）：JavaScript可以操作HTML文档的结构，包括元素、属性和样式。
事件监听：JavaScript可以监听用户的操作（如点击），并在特定事件发生时执行相应的函数。

实现步骤

HTML结构：创建一个左侧导航栏。
CSS样式：定义正常状态和激活状态的字体颜色。
JavaScript逻辑：添加事件监听器，当点击某个导航项时，改变其字体颜色。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="nav">
        <li class="nav-item active">首页</li>
        <li class="nav-item">关于我们</li>
        <li class="nav-item">联系我们</li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.nav-item {
    color: black; /* 默认字体颜色 */
    cursor: pointer;
}

.active {
    color: red; /* 激活状态的字体颜色 */
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const navItems = document.querySelectorAll('.nav-item');

    navItems.forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有导航项的激活状态
            navItems.forEach(navItem => navItem.classList.remove('active'));
            // 为当前点击的导航项添加激活状态
            this.classList.add('active');
        });
    });
});

优势与应用场景

动态交互：用户点击导航项时，页面能实时响应并更新样式，增强用户体验。
灵活性：通过JavaScript可以轻松实现复杂的交互逻辑，适应不同的设计需求。
广泛应用：适用于任何需要用户交互来改变页面元素的场景，如网站导航、选项卡切换等。

可能遇到的问题及解决方法

事件未触发：
- 确保JavaScript代码在DOM完全加载后执行（使用DOMContentLoaded事件）。
- 检查元素选择器是否正确。

样式未更新：
- 确认CSS类名拼写无误，并且CSS文件已正确链接。
- 使用浏览器的开发者工具检查元素的实际样式是否被正确应用。

通过以上步骤和代码示例，你可以轻松实现左侧导航点击后改变字体颜色的功能。如果有更多具体问题或需要进一步的优化建议，请随时提问。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

小程序鼠标点击按钮（改变背景颜色字体）

目标需求：实现下图，给点击的view增加类，每次只能选择一个。主要思路：给点击的view增加类，依靠点击的index对state进行赋值。如果相同时，给该view增加类。效果演示： ?...79rpx; } .active-tag .flex-item { background: #03e2ff; color: #fff; border: 1rpx solid #fff; } js

3.9K2 0

html布局_css三栏布局

; } .nav ul{ margin-left: 30%; /* 导航栏下的ul标签与左侧距离为导航栏宽度的30% */ } .nav li{ float: left; /* 导航栏下的li标签整体向左浮动...*/ list-style: none; /*去掉导航栏下的li标签前的小圆点*/ margin-left: 100px; /*导航栏下的li标签与其左侧标签的距离为100像素 */ } .nav >...position: absolute; background-color: #ededed; color: #333; } .nav >ul ul{ display: block; /* 点击导航栏下的第一级...* 底部下的span标签的字体颜色为#2f2f2f */ font-size: 20px; /* 底部下的span标签的字体大小为20像素 */ } 左侧菜单栏--> HTML CSS JS <!

3.5K3 0

【CSS】课程网站头部制作 ② ( 导航栏测量 | 导航栏编写 | 代码示例 )

标签结构 2、 CSS 样式一、导航栏测量 ---- 1、左侧边界导航栏最左侧位置 , 距离 logo 盒子有 70 像素 , 考虑到设置外边距 , 这里将 logo 盒子与导航栏之间的距离设置成...工具 , 点击文字内容 ; 在文字工具中 , 会显示文字大小 18 像素 , 点击右侧的颜色 , 还会弹出 " 拾色器 ( 文本颜色 ) " 对话框 , 其中显示了文本颜色 #050505 ;...3、底部边框测量底部边框 2 像素 , 使用吸管工具吸取颜色 , 可得到颜色值 #00a4ff ; 二、导航栏代码编写 ---- 1、 HTML 标签结构导航栏使用无序列表实现 ,...*/ font-size: 18px; /* 字体颜色 */ color: #050505; /* 取消链接下方的横线 */ text-decoration: none; /* 调试时使用的背景...*/ font-size: 18px; /* 字体颜色 */ color: #050505; /* 取消链接下方的横线 */ text-decoration: none; /* 调试时使用的背景

3.9K2 0

ReactNative-综合案例（01）

null // headerBackTitle:null, // 设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。...// headerRight:{}, // 设置导航条右侧。可以是按钮或者其他。 // headerLeft:{}, // 设置导航条左侧。可以是按钮或者其他。...// headerTintColor:'green', // 设置导航栏文字颜色。总感觉和上面重叠了。...animationEnabled: false, swipeEnabled: false, tabBarOptions:{ activeTintColor: '#FF8403', // 改变...tabBar选中字体颜色 // inactiveTintColor: '#CC9999', // 文字和图片默认颜色 // showIcon: true, // android

2K3 0

【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )

// 背景设置成黑色 decoration: BoxDecoration( color: Colors.black, ), // 字体设置成黄色...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...currentIndex: _currentSelectedIndex, // 设置点击底部导航栏的回调事件 , index 参数是点击的索引值...修改当前选中索引 // 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡 setState(() { // 改变...floatingActionButton: FloatingActionButton( onPressed: (){ print("悬浮按钮点击

9.3K0 0

【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )

Banner 底部有 70 像素 ; 下图中 , 红色矩形框为 Banner 条的总盒子 , 黄色矩形框是版心盒子 , 洋红色矩形框为左侧导航栏盒子 , 右侧绿色矩形框为课程表盒子 ; 2...、背景测量切图使用吸管工具 , 点击背景 , 吸取颜色值 , 然后点击 " 前景色 " 拾色器 , 可以获取 Banner 条的背景颜色值 #1c036c ; 使用 " 移动工具 " , 勾选自动选择...*/ font-size: 18px; /* 字体颜色 */ color: #050505; /* 取消链接下方的横线 */ text-decoration: none; /* 调试时使用的背景...颜色实线 */ border-bottom: 2px solid #00a4ff; } /* 搜索栏盒子模型 */ .search { /* 设置左浮动排列在导航栏后面 */ float:...30 像素左外边距 */ margin-left: 30px; /* 文字大小 14 像素 */ font-size: 14px; /* 字体颜色 #666666 */ color: #666666

3.9K2 0

WordPress免费主题：Document，让阅读变得更加方便

能够根据文章内容自动生成文章目录，虽然这个前端实现比较方便，但是考虑到需要seo所以直接在后端生成；文章目录导航需要自动跟随阅读进度，点击文章目录导致自动跳转到对应的内容；文章目录最小高度为屏幕的一半...，悬浮在文章左侧； 2....增加文章顶部的面包屑导航。修复因为QQ、微信浏览器不支持16进制透明颜色导致阴影失效的BUG。...20220710更新修改了Github仓库地址新增自定义Smtp邮件发送功能，开启后用户评论、回复时自动会发送邮件通知。...20220724更新首页变成两栏显示优化了大屏和小屏显示的字体大小调整了移动端的UI样式下滑阅读时自动隐藏导航栏，上滑时自动显示。

4.3K4 0

React Native 系列(八) -- 导航

导航条不能自定义 NavigatorIOS 优势：有系统自带的返回按钮常用属性 barTintColor : 导航条的背景颜色 navigationBarHidden : 为true , 隐藏导航栏...tintColor : 导航栏上按钮的颜色设置。 titleTextColor : 导航栏上字体的颜色。 translucent : 导航栏是否是半透明的，true／false。...：设置导航栏标题，推荐 headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。...可以是按钮或者其他视图控件 headerLeft：设置导航条左侧。可以是按钮或者其他视图控件 headerStyle：设置导航条的样式。...：设置导航栏颜色 headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0 gesturesEnabled：是否支持滑动返回手势，iOS默认支持

6K8 0

纯血鸿蒙APP实战开发——城市定位选择案例

介绍本示例介绍城市选择场景的使用：通过 AlphabetIndexer 实现首字母快速定位城市的索引条导航。...实现思路场景：通过AlphabetIndexer实现索引条导航城市列表中的右侧首拼索引条，通过AlphabetIndexer组件实现首字母快速定位城市的索引条导航。....alignStyle(IndexerAlign.Right) // 弹出框在索引条左侧弹出 .onSelect((tabIndex: number) => { this.scroller.scrollToIndex...(tabIndex); })当用户滑动List组件，list组件onScrollIndex监听到firstIndex的改变，绑定赋值给AlphabetIndexer的selected属性，从而定位到字母索引...当点击AlphabetIndexer的字母索引时，通过scrollToIndex触发list组件滑动并指定firstIndex，从而实现List列表与AlphabetIndexer组件首字母联动吸顶展示

882 0

个人主题建站首选微博秀模板，仿新浪微博官网

-- 优化文章超链接颜色代码。更新日志：2020/10/20 --优化编辑器某些特使标记在前台无法显示的问题。更新日志：2020/10/09 --.优化侧栏标题字体，增加竖线样式。...主题更新日志：（2020/01/23）修复一处因春节皮肤导致字体颜色不清晰问题。主题更新日志：（2020/01/22）优化导航自适应显示效果。新增新春皮肤及全屏飘雪特效。...主题更新日志：（11/22）优化导航自适应显示效果，由原来左侧手指图标显示改为顶部状态栏显示。修复独立文章页编辑时链接指向文章的BUG。优化了自适应导航各模块之间的间距。...主题更新日志：（09/23）修复移动端顶部导航部分点击无效的BUG。...主题设置介绍：按照我的习惯设置步骤走，首页我可能会先设置侧栏信息，左侧的导航调用的模块是，导航栏（模块管理，导航栏），设置完导航在设置右侧的侧栏信息，标注下各模板对应的侧栏模块：首页模板（对应

3.5K2 0

Axure实战06:创建一个AppleSymbol图标库网站

首先是侧边导航栏，我们拖入一个动态面板放在左侧，在样式工具栏中，设置它的位置为0,0，尺寸是256*955，并填充动态面板的背景颜色为#001529。...我们双击动态面板进入动态面板内部，拖入一个矩形1组件，在样式工具栏中，修改它的位置为（13，20），尺寸为230*52，填充颜色为透明色，线段宽度为0；双击矩形1，输入文字“导航菜单”，字体大小为14...号字，字体颜色为#FFFFFF。...我们点击“页面”工具栏，打开“导航菜单”页面，设置页面的背景颜色为#F0F2F5。拖入一个“矩形1”组件，命名为”name"。...双击输入文字为“图标名称”，设置字体颜色为#666666，字号为14。再拖入一个“图片”组件，命名为“image”。

2.6K2 0

【CSS】课程网站头部制作 ③ ( 搜索栏表单测量 | 搜索栏表单代码编写 | 代码示例 )

---- 1、左侧边界搜索栏 , 大概结构如下 , 左侧是个文本框 , 右侧是个按钮 ; 导航栏文本有 10 像素内边距 , 20 像素外边距 , 文本输入框表单 , 距离导航栏外边距有..., 吸取边框的颜色值 , 为 #00a4ff ; 3、文本输入框表单提示文本测量使用横排文字工具 , 点击表单中的提示文本 , 该文本大小 14 像素 , 颜色值 #bfbfbf ;...padding: 0 10px; /* 右外边距 20 像素 */ margin-right: 20px; /* 行高 = 内容高度垂直居中 */ line-height: 40px; /* 字体大小...*/ font-size: 18px; /* 字体颜色 */ color: #050505; /* 取消链接下方的横线 */ text-decoration: none; /* 调试时使用的背景...颜色实线 */ border-bottom: 2px solid #00a4ff; } /* 搜索栏盒子模型 */ .search { /* 设置左浮动排列在导航栏后面 */ float:

1.9K3 0

【Html.js——功能实现】布局切换（蓝桥杯真题-18556）【合集】

js/index.js 是待补充代码的 js 文件。...在浏览器中预览 index.html 页面效果如下：目标效果完善 js/index.js 的 TODO 部分的代码，实现被点击的模式元素（class=layout-option）处于激活状态，即添加一个类名...，优先使用 Arial 字体，如果没有则使用系统默认的无衬线字体。...transform: translateX(calc(0px - 100% - 40px)); 将操作图标向左移动到文章左侧。...点击模式按钮：用户点击导航栏中的模式按钮（id="switching"），触发 JavaScript 中的点击事件，显示布局选项区域（id="mode"）。 3.

540 0

PS如何制作圆角矩形Logo

CTRL按键加鼠标滚轮可以左右滚动画布按键盘的ALT按键加鼠标滚轮可以放大缩小画布 1、首先打开Photoshop软件（如果电脑没有安装的话可以使用在线PS工具）进行制作，这边以在线PS工具为例 2、首先点击右上角的文件...>> 新建 3、在弹出的项目框中设置Logo项目名字、宽度、高度、背景色（推荐选择透明） 4、创建完后画布如下 5、点击左侧工具栏的矩形工具功能 >> 右击选择矩形工具 6、顶部会出现矩形工具设置功能...，填充类型选择无（为了可以自定义喜欢的颜色），选择角半径（输入需要的半径如25PX） 7、在画布上面画出需要的圆角矩形大小，然后放开鼠标左键即可绘制完成 8、绘制完如下 9、绘制完圆角矩形看起来有点单调...，我们来给他填充下颜色首先点击顶部导航栏的图层 >> 新建填充图层 >> 纯色 10、在弹出的拾色器中选择需要的颜色，然后点击确定 11、填充完后如下 12、点击左侧工具栏的文字工具功能，选用文字工具...13、在画布需要写入文字的地方点击，如下图输入 w 14、选中输入的文字，在顶部文字工具菜单栏选中字体样式、字体大小、字体颜色 15、设计完后如下到此PS绘制圆角矩形Logo步骤完成啦！

2K2 0

Android--Toolbar基本使用

findViewById(R.id.tb_demo); toolbar.setTitle("主标题"); toolbar.setSubtitle("副标题"); //设置左侧导航图标...toolbar.setNavigationIcon(R.drawable.ic_arrow_back_black_24dp); //设置导航点击监听 toolbar.setNavigationOnClickListener...点击右侧overflow的toolbar.jpg 弹框的样式可以通过Toolbar的setPopupTheme方法改变还可以通过style设置Toolbar的字体颜色，如设置副标题颜色： <!...setSubtitleTextAppearance(Context context, int resId) 设置文本颜色，大小，样式，颜色提示，并突出显示颜色从指定TextAppearance资源。...setTitleTextAppearance(Context context, int resId) 设置文本颜色，大小，样式，颜色提示，并突出显示颜色从指定TextAppearance资源。

1.6K3 0

【CSS】课程网站网格商品展示模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

15 像素间隔 , 这里使用上外边距设置 ; /* 网格商品展示模块大盒子距离上面的导航栏 15 像素 */ .box { margin-top: 15px; } 3、左侧文本盒子尺寸测量和样式...文本部分设置垂直居中 */ .box-hd { /* 内容高度 = 行高, 垂直居中 */ height: 60px; line-height: 60px; } 文本大小 20 像素 , 字体颜色...#494949 ; /* 左侧文本样式 */ .box-hd h3 { /* 文本左浮动 */ float: left; /* 设置字体大小和颜色 */ font-size: 20px;...-- 左侧侧导航栏 --> <!...样式 */ /* 侧导航栏样式 */ .subnav { /* 设置左浮动 */ float: left; /* 左侧侧导航栏 190 x 420 , 左右两侧各 20 像素内边距 */

4.3K4 0

用Spring Boot+Vue做微人事项目第七天

第四天做了Home页的Title制作和下拉菜单，下拉菜单有三个选项，个人中心、设置和注销登录，还做了注销登录，点击注销登录会出现提示：“此操作将注销登录，是否继续”，点是就重新跳转到登录页面，第五天做的是左边的导航菜单...，然后用vue对象.use使用vuex //导入vue对象 import Vue from 'vue' //导入vuex import Vuex from 'vuex' Vue.use(Vuex)...在动态渲染左侧导航栏菜单的时候，一级菜单出来了，但是二级菜单和一级菜单是一样的。...里面加上下面一行代码即可 import 'font-awesome/css/font-awesome.min.css' 动态渲染了菜单导航栏之后，点击子菜单进不去里面的页面，这是因为没有在menus.js...写完之后发现点击首页显示Home字体，不太合适，就不显示Home字体了，进行判断一下 ?

5921 0

CodeBlocks 配色方案设置

依次点击Export Save按钮。我的是Win7系统，XP系统可能略有差异。一般cb_share_config.exe程序中选择的默认路径即是。...C:\Users\yourusername\AppData\Roaming\CodeBlocks 目下下的default.conf 然后用我们从官网上弄来的配色方案替换default.conf 注意...如果想要改变其他风格可以在Settings>Editor>Syntax Highlighting在colour theme中选择你想要的风格，你也可以自定义各种颜色。 ?...在Settings->Editor->左侧General settings，修改字体为Consolas，字号选择11号，同时把下面的show line numbers选中 Consolas字体的斜体简直不要太好看...Margin chrome背景与前景色设置比背景色稍浅一些的颜色，这样可以有区分。至此全部完成。

3.4K2 0

前端成神之路-品优购项目(一)

目录文件夹名称说明项目文件夹 pinyougou 样式类图片文件夹 img 样式文件夹 css 产品类图片文件夹 upload 字体类文件夹 fonts 脚本文件夹 js 样式文件的分类初始化.../> 注意点：描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣，吸引用户点击。同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。...这就是字体图标（iconfont). 1. 字体图标优点可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.. 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等......品优购首页布局命名集合：名称说明快捷导航栏 shortcut 头部 header 标志 logo 购物车 shopcar 搜索 search 热点词 hotwrods 导航 nav 导航左侧 dorpdown...nav 盒子通栏有高度而且有个下边框 1号盒子左侧浮动 dorpdown 下拉导航里面包含 dt dd 2号盒子右侧浮动 navitems 导航栏组 11. logo 优化 logo 里面首先放一个

1.7K2 0

微信开发--微信小程序(一)

下载点击右上角的 "文档" ,在左侧找到 "开发者工具的使用",点击蓝色字体 "微信开发者工具", 下载稳定版的Windows64 ,可根据自己的实际下载.安装以后就可以用啦. 3....底部导航栏 tabBar 点击右上角的 "文档"后点击上侧导航栏的指南--基础能力--自定义tabBar 在 "微信开发者工具" 里的app.json 文件中全局配置: "tabBar": {..."color": "grey", //选中时字体的颜色 "selectedColor": "#FF9900", //底部导航栏的背景色 "backgroundColor"...电影列表(list目录) 首先在list.js文件写生命周期,(大写P,回车就好啦), 然后就是静态页面啦,布局啦,此处省略一万字..... list.js文件发起请求,并把它赋值给自定义的变量,代码示例...注册后进入首页,点击GitHub,下载dist文件夹,将dist文件夹直接放在项目的目录下,它是这样的: ?

16.2K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭