`

菜单样式-实现onclick改变背景色效果

阅读更多

 

今天搞了一个菜单样式,要实现菜单被单击之后改变背景色 同时在其它菜单被单击时改变已单击菜单背景色

 

html代码:

 

 

js代码:


效果:

分享到:
评论

相关推荐

    不通的页面,点击导航改变背景色

    综上所述,实现“不通的页面,点击导航改变背景色”的功能涉及CSS样式设计、JavaScript交互逻辑或前端框架的应用。通过这些技术,我们可以创建一个动态且直观的导航菜单,提高用户在网站上的浏览体验。

    网页右键菜单封装类 实现web右点击菜单

    CSS则用于美化菜单,如设置背景色、边框、阴影、字体样式等,还可以添加过渡效果,使得菜单的出现和消失更加平滑。同时,CSS的`display`属性可以用来控制菜单的可见性,与JavaScript配合以实现动态显示和隐藏。 ...

    android 底部弹出菜单(带透明背景)

    本篇文章将详细讲解如何创建一个带有透明背景的底部弹出菜单,以及相关的实现技术和注意事项。 首先,我们来了解什么是`PopupWindow`。`PopupWindow`是Android SDK提供的一种轻量级的弹出窗口组件,它可以在屏幕上...

    纯CSS实现的下拉菜单

    - `#sddm`: 设置了菜单的基本样式,如居中显示、背景色等。 - `#sddm li`: 定义列表项的样式,包括浮动布局、字体大小等。 - `#sddm li a`: 设置主菜单项链接的样式。 - `#sddm div`: 子菜单容器的样式,设置为...

    javascript 菜单

    这可以通过JavaScript修改元素的背景色或者应用CSS类来实现。 以上这些JavaScript菜单实例展示了如何利用JavaScript和CSS来增强网页的视觉效果和用户体验。通过学习和理解这些示例,开发者可以提升自己的前端技能,...

    智能JS菜单-很好用的

    - 左侧菜单区设置宽度150像素,高度500像素,背景颜色为#009900,并对其内部的菜单项进行了样式定义,包括宽度、高度、背景色、文字颜色等。 ### 2. JavaScript交互逻辑 JavaScript部分主要实现了左侧菜单的动态...

    系统菜单加彩色,在菜单上盘旋,image能重现

    标题中的“系统菜单加彩色,在菜单上盘旋”指的是在计算机软件的系统菜单中实现颜色的自定义和动态效果,比如菜单项在鼠标悬停时可以改变颜色或以某种动画方式显示。这通常涉及到图形用户界面(GUI)的设计和编程,...

    多级联动菜单 div+css +js

    3. 鼠标悬停效果:通过`:hover`伪类,为菜单项添加鼠标悬停时的样式变化,如背景色、边框等,增强用户体验。 4. 层叠上下文:当菜单具有多个层级时,理解CSS的层叠上下文(z-index)对控制元素覆盖关系非常重要,...

    自由灵活的下拉菜单.rar

    - 反馈机制:在用户交互时提供视觉反馈,如高亮选中项或改变鼠标悬停时的背景色。 - 响应式设计:适应不同屏幕尺寸和设备,确保在手机、平板和桌面电脑上都能正常工作。 - 动画效果:适度的动画可以提升用户体验...

    css横向导航菜单代码

    在这个例子中,CSS被用来控制导航菜单的样式,如宽度、高度、背景色、文字颜色、边框等。 2. **横向布局**:横向导航菜单意味着菜单项水平排列,通常位于页面的顶部。这可以通过设置元素的`display`属性为`inline-...

    javascript实现简单的下拉菜单

    这里主要定义了下拉菜单的背景色、边框颜色以及透明度。这些样式可以根据实际需求进行调整。 #### 四、JavaScript逻辑 接下来是实现下拉菜单功能的核心——JavaScript代码。 ```javascript function aa() { if ...

    javascript自定义右键弹出菜单实现方法.docx

    - 每个菜单项都绑定了`onmousemove`、`onmouseout`和`onclick`事件,以实现鼠标悬停时改变背景色、鼠标移出时恢复背景色以及点击时执行相应动作的功能。 通过上述步骤,我们可以成功地实现一个简单的JavaScript...

    js树形菜单

    首先,DSTree使用CSS来定义菜单项的样式,包括字体、背景色、边框、高度、内边距、外边距等属性。例如,`#treeBox.hasItems` 类用于表示有子节点的菜单项,其中`font-weight:bold`使其字体加粗,以区别于无子节点的...

    类似QQ的垂直菜单(动态)

    在更复杂的菜单切换操作中,代码提供了平滑过渡效果,这通常涉及到元素高度的变化和背景色的改变,以达到视觉上的流畅转换。例如: ```javascript function switchoutlookBar(number) { // 这个函数用于切换不同的...

    CSS+JS 仿 QQ 切换 菜单

    2. **标题样式**:为每个菜单项的标题设置了特定的样式,包括宽度、高度、背景色等。 ```css .titleStyle { width: 100%; height: 26px; background-color: #008800; color: #ffffff; border-top: 1px solid ...

    popwindow实现仿uc菜单

    为了让菜单更具UC浏览器的风格,你可能需要对`PopupWindow` 进行一些定制,如添加阴影效果、背景色或动画。可以通过以下方式设置: ```java // 添加阴影 popupWindow.setOutsideTouchable(true); popupWindow....

    自定义PopupWindow实现底部弹出式菜单

    在Android开发中,`PopupWindow` 是一个非常实用的组件,它允许开发者创建浮动、可定制的窗口,常用于实现各种弹出式效果,如底部菜单、上下拉选择器等。本篇将深入探讨如何利用`PopupWindow`来实现一个自定义的底部...

    Div+CSS+JS树型菜单

    - `#nav li:hover`:鼠标悬停时改变菜单项的背景色。 - `#nav a:link, #nav a:visited`:设置未访问链接的颜色和去除下划线。 - `#nav a:hover`:设置鼠标悬停时链接的颜色和加粗字体。 ##### 3. **子菜单样式** -...

    点击左键弹出的菜单HTML语言

    当然,为了增强用户体验,我们可以使用CSS来美化这个菜单,例如添加过渡效果、改变背景色、设置边框等。此外,还可以使用`:hover`伪类来实现鼠标悬停时的高亮效果。 总结来说,"点击左键弹出的菜单HTML语言"是一个...

    js+css3实现的蓝色手风琴图标菜单特效源码.zip

    这里的蓝色主题可能通过CSS设置背景色、边框色等属性实现。 10. **图标使用**:手风琴菜单通常包含图标来增加视觉吸引力和易用性。可能使用了SVG图标或者字体图标库,如Font Awesome,来实现这些图标,并通过CSS...

Global site tag (gtag.js) - Google Analytics