开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

导航点击后变色css

基础概念

导航点击后变色是一种常见的网页交互效果，用于提示用户当前所处的页面位置。这种效果通常通过CSS来实现。

相关优势

用户体验：通过颜色变化，用户可以直观地知道当前所在页面，提高用户体验。
视觉反馈：点击后变色可以提供即时的视觉反馈，让用户知道他们的操作已被系统识别。
导航清晰：有助于用户快速定位和切换页面。

类型

纯CSS实现：通过CSS伪类:active和:focus来实现点击后的颜色变化。
JavaScript辅助：结合JavaScript来动态改变导航项的样式。

应用场景

网站导航栏：在网站的顶部导航栏中，点击某个菜单项后，该项颜色变化。
侧边栏导航：在侧边栏导航中，点击某个选项后，该项颜色变化。
按钮：在表单或交互界面中，点击按钮后，按钮颜色变化。

示例代码（纯CSS实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航点击后变色</title>
    <style>
        .nav-item {
            padding: 10px;
            color: #fff;
            background-color: #333;
            margin: 5px;
            cursor: pointer;
        }
        .nav-item:hover,
        .nav-item:focus {
            background-color: #555;
        }
        .nav-item:active {
            background-color: #777;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-item" tabindex="0">Home</div>
        <div class="nav-item" tabindex="0">About</div>
        <div class="nav-item" tabindex="0">Services</div>
        <div class="nav-item" tabindex="0">Contact</div>
    </div>
</body>
</html>

示例代码（JavaScript辅助）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航点击后变色</title>
    <style>
        .nav-item {
            padding: 10px;
            color: #fff;
            background-color: #333;
            margin: 5px;
            cursor: pointer;
        }
        .active {
            background-color: #777;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-item" onclick="changeColor(this)">Home</div>
        <div class="nav-item" onclick="changeColor(this)">About</div>
        <div class="nav-item" onclick="changeColor(this)">Services</div>
        <div class="nav-item" onclick="changeColor(this)">Contact</div>
    </div>

    <script>
        function changeColor(element) {
            const items = document.querySelectorAll('.nav-item');
            items.forEach(item => item.classList.remove('active'));
            element.classList.add('active');
        }
    </script>
</body>
</html>

参考链接

通过以上示例代码，你可以实现导航点击后变色的效果。纯CSS实现简单且性能较好，而JavaScript辅助可以实现更复杂的交互效果。

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

有帮助

没帮助

相关·内容

点击导航栏，切换div内容（js+css+html）

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140453.html原文链接：https://javaforall.cn

12.7K2 0

前端切图|点击按钮div变色

DOCTYPE html> 点击按钮div变色.html...--点击改变当前div的颜色，所以要给onclick这个事件的函数传递当前的对象即可--> 开始 //这个事件的目的是：当我们点击时要怎么处理...原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，爱折腾。

4K1 0

html鼠标点击后变换样式,css鼠标样式（css鼠标点击切换样式）

css鼠标样式新浪博客代码个性化CSS鼠标样式网址完整问题：新浪博客代码个性化CSS鼠标样式网址好评回答：进入控制面版→维护首页内容→自定义空白面版→输入方框内代码，有的人给出的代码还要打字,我的不需要...现在知道css的神奇了吧。...CSS样式怎样才可以做到鼠标移动到字体下显示有下划线完整问题：CSS样式怎样才可以做到鼠标移动到字体下显示有下划线好评回答：a{text-decoration:none} //设置默认无下划线a...3岁宝宝咬人后昏迷，医生检查后，妈妈哭的晕过去小编今天讲一个很让父母受教的事。...有人说，宝宝应该从小抓起，其实不然，当女性怀孕后，宝宝还在肚子里面的时候，准妈妈就要开始进行教育了，也就是所谓 […]… 这三种性格的妈妈，是教不出优秀孩子的，尤其第一种最“可怕”！

4.5K3 0

CSS——设置边框渐变色

前言最近在写一个typecho的主题，刚好遇到这样一个问题就记录下吧步骤这是一个CSS的过度效果，效果如下。

1391 0

JQuery排他思想-按钮点击变色事件按钮制作

点击按钮的时候，被点击按钮颜色变化，其他按钮要保持不变。 <!...$(function() { $("button").click(function() { $(this).css...，被点击按钮颜色变化，其他按钮要保持不变。...$(function() { $("button").click(function() { $(this).css...，被点击按钮颜色变化，其他按钮要保持不变。

10.2K3 0

jquery导航栏点击及页面跳转后对应栏目添加选中效果

导航栏点击添加选中样式是比较好实现的，点击后添加一个 .active 再给它设置一个样式就可以了。...但是一般页面的导航栏都是需要跳转页面的，上面的方法只在当前页面有效，跳转后就失效了。要实现跳转后，对应的栏目自动添加选中效果，可以用下面的方法。

4.5K0 0

Android笔记：Listview点击item当前item变色其他不变

layout_height="match_parent" android:background="#f4f5f7" android:scrollbars="none"> 2.activity里加载适配器完后添加这两句代码

1.1K3 0

手机端CSS :hover点击后返回无法取消的解决方法

今天写项目时遇到一个问题，设置 :hover 属性的链接，点击后或者点击进入下一个页面返回依旧是 :hover 状态。 ?...a:visited 英文visited就是访问过的意思，代表这段文本被点击之后的属性。 a:hover 英文hover就是悬停的意思，代表鼠标指针放在这个链接上时的属性。...声明：本文由w3h5原创，转载请注明出处：《手机端CSS :hover点击后返回无法取消的解决方法》 https://www.w3h5.com/post/353.html

3.9K1 0

css3实现border渐变色

.gradualChange{ width: 300px; height: 300px; border:20px solid; //兼容 border-imag...

1.2K1 0

直播视频网站源码，按钮背景点击按下变色

Grey-New-York-Time-Newspaper-on-Table-Together-with-Juice-Glasses_FmBEzOpr979r.jpeg 直播视频网站源码，按钮背景点击按下变色的相关代码... android:bottomLeftRadius="10dp"/> 以上就是直播视频网站源码，按钮背景点击按下变色的相关代码

1.6K3 0

css字体渐变色_html美化代码

我觉得还不错 10 #g0fff0f#u#b 麦子稀饭的渐变色 1 #g33CC00#b#u 我没有审美水平每个颜色都好看这个是大红深紫的渐变色成熟型的。

3.6K2 0

CSS mask 让png等图标变色的技巧

如下HTML和CSS代码就好了： .colorful { display: inline-block; width: 32px.../test.png) no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } CSS3 mask默认是基于透明度实现遮罩效果的

1.8K3 0

Css添加div点击态

.active:active::after { display: block; } 点击态

4.8K2 0

CSS + HTML导航栏效果

今天写了一个导航栏，需要的效果如下：实现的代码思路如下：导航栏 css"> *{margin:0;padding: 0;} div{ height: 40px; width:960px; background: #55a8ea; margin

4.5K2 0

【CSS教程】简约渐变色登陆布局html+css代码

meta name="viewport" content="width=device-width, initial-scale=1.0"> css.../style.css"> 简约渐变色登陆页-墨吻网络点击注册 CSS * { padding: 0; margin:

1.6K2 0

css 去色_css按钮点击改变颜色

// HTML CSS .grayscale img{filter: grayscale(100%); -webkit-filter

3.5K2 1

CSS 3.0实现创意点击按钮

给大家分享一个用CSS 3.0实现的创意点击按钮，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 CSS...3.0实现创意点击按钮 * { margin: 0; padding

4.3K4 0

HTML+CSS TAB导航栏

这段代码实现了一个名为"Tab导航栏"的效果，它是一个基于CSS的导航栏，包含五个选项卡，每个选项卡都有一个带有渐变背景色的滑块，当用户点击选项卡时，滑块会滑动到相应的位置。...Code html TAB导航栏...Envelope Heart User css

2081 0

鼠标移到导航上面当前的LI变色处于当前的位置

鼠标移到导航上面当前的LI变色处于当前的位置，广泛应用于当前导航。...html> 2 3 4 鼠标移到导航上面...当前的LI变色处于当前的位置-柯乐义 5 css"> 6 ul,li{list-style:none;} 7 #nav li{display

1.1K4 0

vue css 滚动楼层导航定位

this.element.nav_item[index].classList.remove('active'); this.navItemIndex = index; }, /** * 设置楼层导航事件驱动方法...= window_scrollTop - timer.step } }, timer.times) }, // /** // * 监听窗口滚动楼层导航动态定位...window.removeEventListener('scroll', this.floorSrcollEventListener) }, methods: { /** * 设置楼层导航事件驱动方法...document.body.scrollTop = window_scrollTop - timer.step } }, timer.times) }, /** * 监听窗口滚动楼层导航动态定位...min-height: 300px; text-align: center; color: #FFF; background-color: #404040; } 参考滚动楼层导航定位

3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭