1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   <script src="new/js/jquery-3.2.1.min.js" type="text/javascript"></script>
  6.   <!--以上script是导入的jquery文件-->
  7.   <title>无标题文档</title>
  8.   <!--  此处样式可以看成是外部一个.css里面的内容，用法一样-->
  9.   <style type="text/css">
  10. .mainnav{ background:#292929; height:43px; margin-top:1px; margin-bottom:10px;}
  11. .mainnav ul{}
  12. .mainnav ul li{ float:left; display:inline;  right no-repeat; padding-right:2px;}
  13. .mainnav ul li a{ display:inline-block; height:43px; line-height:43px; padding:0 23px; font-size:14px; color:#fff; font-weight:bold;}
  14. .mainnav ul li a:hover{ text-decoration:none; color:#e87717;}
  15. .mainnav ul li.on a{ color:#e87717;}
  16.  
  17. </style>
  18.  </head>
  19.  <body>
  20.   <div class="mainnav">
  21.    <ul>
  22.     <li class="on"><a href="#">首页</a></li>
  23.     <li><a href="#">主页</a></li>
  24.     <li><a href="#">足球</a></li>
  25.     <li><a href="#">篮球</a></li>
  26.     <li><a href="#">台球</a></li>
  27.    </ul>
  28.   </div>
  29.   <script type="text/javascript">
  30.    $(document).ready(function () {
  31.     $('li').bind('click',function(){
  32.             $(this).addClass('on');
  33.             $('li').not($(this)).removeClass('on');
  34.     });
  35. });
  36. </script>
  37.  </body>
  38. </html>

Nav 切换的更多相关文章

  1. vue做nav切换

    话不多说,直接上代码. 关键:通过点击来改变thisindex ,又thisinde == index来控制class是否含active来控制样式 简单效果如下:

  2. React native 之android的图标和启动图片

    哎哎呀呀,上篇说到了react native的IOS的图标和启动图片的设置,其实最主要的是尺寸!相应的尺寸设定好了以后就不会报错了! ok~这篇说的是React native的android的图标和启 ...

  3. 纯CSS实现nav导航栏+jQuery实现article区DIV切换

    效果图: main.html 代码: <!DOCTYPE html> <html> <head> <title>MyHomepage</title ...

  4. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  6. iOS 切换首页-更改tabbar的容器控制器

    最近想到的一个小需求: 首页切换:点击一个切换按钮,能实现首页的风格.排版等变换,原理是用一个新的VC替换掉. 效果如下:   ====>====> 实现方式很简单: 以我的Demo为例, ...

  7. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  8. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  9. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

随机推荐

  1. Kaggle（一）：房价预测

    Kaggle(一) 房价预测 (随机森林.岭回归.集成学习)  项目介绍:通过79个解释变量描述爱荷华州艾姆斯的住宅的各个方面,然后通过这些变量训练模型, 来预测房价.   kaggle项目链接:ht ...

  2. C语言——打印“Hello World!”，这么简单？

    打印Hello World! #inculde <stdio.h> int main(){ printf("Hello World!"); return 0; } 第一 ...

  3. [IMX6]Android6.0移植和分析

    0. 知识点 中断(设备树) [IMX6]设备树分析--dts 1. 编译 Android6.0内核移植(1):分析编译日志 Android6.0内核移植(2):kernel编译内核 单独烧录kern ...

  4. [CQOI 2018]交错序列

    Description 题库链接 定义长度为 \(n\) 的"交错序列"为:长度为 \(n\) 序列中仅含 \(0,1\) 且没有相邻的 \(1\) .给出 \(a,b\) ,假设 ...

  5. WPF中播放声音媒体文件

    这段时间我们小组要给部门的Annual Meeting準备一个WPF的抽奖程序,为了增加程序的有趣性,我们在程序中需要播放背景音乐等.由於对之前从未使用过WPF,所以对其中的声音等媒体文件播放不是很清 ...

  6. CSS3完善和模式

    CSS3改善了传统盒模型架构,增强盒子构成要素的功能,扩展了盒模型显示的方式,具体描述如下 改善构造:除了传统的内容区域,边框区,补白区和边界区外,为盒子新增了轮廓区. 增强功能:内容增强CSS自动添 ...

  7. 进程间通信IPC -- 管道, 队列

    进程间通信--IPC(Inter-Process Communication) 管道 from multiprocessing import Pipecon1,con2 = Pipe()管道是不安全的 ...

  8. C Traps：优先级常见错误

    逻辑与关系运算符 if (flags & FLAG != 0) {...} 这类错误以前也犯过,因为!=的优先级比&要高所以实际上是这样的 if (flags & (FLAG ...

  9. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  10. android调试debug快捷键

       1. [Ctrl+Shift+B]:在当前行设置断点或取消设置的断点.    2. [F11]:调试最后一次执行的程序.    3. [Ctrl+F11]:运行最后一次执行的程序.    4. ...