<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="new/js/jquery-3.2.1.min.js" type="text/javascript"></script>

  <!--以上script是导入的jquery文件-->

  <title>无标题文档</title>

  <!--  此处样式可以看成是外部一个.css里面的内容，用法一样-->

  <style type="text/css">

.mainnav{ background:#292929; height:43px; margin-top:1px; margin-bottom:10px;}

.mainnav ul{}

.mainnav ul li{ float:left; display:inline;  right no-repeat; padding-right:2px;}

.mainnav ul li a{ display:inline-block; height:43px; line-height:43px; padding:0 23px; font-size:14px; color:#fff; font-weight:bold;}

.mainnav ul li a:hover{ text-decoration:none; color:#e87717;}

.mainnav ul li.on a{ color:#e87717;}

</style>

 </head>

 <body>

  <div class="mainnav">

   <ul>

    <li class="on"><a href="#">首页</a></li>

    <li><a href="#">主页</a></li>

    <li><a href="#">足球</a></li>

    <li><a href="#">篮球</a></li>

    <li><a href="#">台球</a></li>

   </ul>

  </div>

  <script type="text/javascript">

   $(document).ready(function () {

    $('li').bind('click',function(){

            $(this).addClass('on');

            $('li').not($(this)).removeClass('on');

    });

});

</script>

 </body>

</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. [LeetCode]LinkedList Cycle

    题目说明 Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without usi ...

  2. sublime text 2+sublimeClang

    sublimeClang 是github上面的开源项目,可用于C/C++的自动补全 github:https://github.com/quarnster/SublimeClang 配置sublime ...

  3. tomcat与jboss等容器的区别

    1.JBoss 是 J2EE 应用服务器,而 Tomcat 只是一个 Servlet 容器,或者说是一个简单的 J2EE 应用服务器. JBoss 中的 Servlet 容器还是 Tomcat. 与  ...

  4. 从Qt到PyQt

    Hello World PyQt与Qt具有极其相似的类族和API,而且不再使用qmake系统和Q_OBJECT宏使得PyQt在没有编译链接时频繁的错误而且代码更加友好. from PyQt4 impo ...

  5. 19.Decorator修饰器

    Decorator 修饰器 类的修饰 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. @testable clas ...

  6. mysql 用存储过程和函数分别模拟序列

    在其他大部分DBMS里都有序列的概念,即Sequence或Generator. 而mysql里没有,但有时真的很有用.下面分别用存储过程和函数来模拟序列,并用程序模拟并发场景来测试原子性和完整性,是否 ...

  7. [转]Creating a custom ribbon for Outlook 2013, 2010 and toolbar for Outlook 2007, 2003 – C# sample

    本文转自:https://www.add-in-express.com/creating-addins-blog/2013/05/21/outlook-ui-customization-ribbons ...

  8. Oracle时间的加减

    最近三个月:  select add_months(sysdate,-3)) from dual; 最近90天:   select  to_char(sysdate-90,'yyyy-MM-dd') ...

  9. AVFoundation-视频录制以及拍照

    一般如果UI和UE在设计时只要求功能,对相机界面没什么要求的话,个人觉得调用系统相机(UIImagePickerController)就可以满足我们的需求比如照相或者录制视频,但是考虑界面美观性,有时 ...

  10. Java多线程学习之线程的取消与中断机制

    任务和线程的启动很容易.在大多数情况下我们都会让他们运行直到结束,或是让他们自行停止.但是,有时我们希望提前结束任务或是线程,可能是因为用户请求取消,或是线程在规定时间内没有结束,或是出现了一些问题迫 ...