HTML导航栏切换状态

实现效果:

点击3个对号中任意一个图标切换成小红旗图标并放大1.2倍。

主要知识点:

1.鼠标经过出现小手状态。cursor:pointer

2.取消li标签的默认样式. list-style:none;

3.通过getElementsByTagName()方法获取li标签的元素集合。

4.通过js代码添加样式。

5.浏览器兼容,

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o-代表opera浏览器私有属性

------源码-------

时间: 2024-10-26 18:21:48

HTML导航栏切换状态的相关文章

jquery实现简单的导航栏切换效果($(this).index)

一个简单的导航栏切换效果的制作,主要通过索引值和jquery的siblings()来实现 html代码: <div class="container"> <ul class="top-nav"> <li class="nav">html</li> <li class="nav">css</li> <li class="nav"&g

导航栏切换按钮事件

同事写的一段代码,不是很难,但感觉不错保存起来 // 导航栏切换按钮事件 $('ul.main-tab>li').on('mousedown', function() { var $this = $(this), $box = $('.main-tab-content'), i = $this.index(); if ($this.hasClass('on')) { return false; } switch (i) { case 0: break; case 1: updateRadarTa

jquerymobile底部导航栏选中状态

jquerymobile底部导航栏: <div data-role="navbar"><ul>...</ul></div> 若要实现底部选中样式必须在当前页面a标签上加上: ui-btn-active ui-state-persist 这两个样式.

Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部

import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.dart'; import 'package:bottom_nav_bar_test/pages/movie_page.dart'; import 'package:bottom_nav_bar_test/pages/music_page.dart'; void main() => runApp(My

MUI底部导航栏切换效果

首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/home.html" class="mui-tab-item mui-active" id="defaultTab"> <span class="mui-icon iconfont icon-shouye"></span

JQ实现导航栏切换效果

html代码 <div class="nav"> <ul> <li><a href="#">点击一</a></li> <li><a href="#">点击二</a></li> <li><a href="#">点击三</a></li> <li><

微信小程序点击顶部导航栏切换样式

类似这样的效果 1 <view class='helpCateList'> 2 <!-- 类别 --> 3 <scroll-view class='scroll-view' scroll-x="true"> 4 <view class="item-content" wx:key="id" wx:for="{{helpCateList}}" wx:for-item="item&

谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣

elementUI的导航栏在刷新页面的时候选中状态消失的解决

首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { background-color: #00b4aa !important; } 在使用elementUI构建vue项目的时候会遇到页面刷新的时候子路由会保持原来的,页面中的内容也是当前对应路由的内容,但是elementUI的导航栏中的高亮显示的却失去了原来的状态,以下是我解决这个内容的方法,暂时没有发现什么