<!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. nginx 超时问题: upstream timed out (110: Connection timed out) while reading response header from upstream

    目录 错误内容 错误原因 错误解决办法 错误内容 我们可以在error.log 里面可以看到 错误内容:upstream timed out (110: Connection timed out) w ...

  2. WPF获取相对位置、坐标的方法

    1.获取鼠标在控件中的坐标: private void item_MouseDown(object sender, MouseButtonEventArgs e) { Point point = e. ...

  3. 正则表达式最后的/i是不区分大小写的意思

    eg: "/\/*install$/i" 正则表达式 代表什么意思   /表达式的内容/ ,php中的正则表达式都必须在 / / 内 \/是匹配"/" 号,*号 ...

  4. JavaScript里的循环方法总结

    JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) ...

  5. java字符串应用之表达式解析器

    一.表达式的组成    1.数字    2.运算符:+ - / * ^ % =    3.圆括号    4.变量二.运算符优先级    由高到低分别为:+-(正负号).^.*/%.+-.=    优先 ...

  6. 【读】为什么BIO效率低下

    原因: 假如有10000个连接,4核CPU ,那么bio 就需要一万个线程,而nio大概就需要5个线程(一个接收请求,四个处理请求).如果这10000个连接同时请求,那么bio就有10000个线程抢四 ...

  7. [源码] 定义String s="abcd", 求长度

    一般会答: s.length() 看源码是如何实现的: /** * Returns the length of this string. * The length is equal to the nu ...

  8. ssm项目快速搭建（配置）

    核心jar包 <properties>    <project.build.sourceEncoding>UTF-8</project.build.sourceEncod ...

  9. html基础-标题标签-文字标签（2）

    昨天说道了我的第一个网页,今天接着继续带大家深入,前期学习千万不要用代码工具哦!那样就少了深入了解的机会了哦! 一.大家都知道文章会有各种标题,网页其实也跟文章差不多也有专门来写标题的元素. (1). ...

  10. 分享到xxx

    来源百度 一.概述 百度分享代码已升级到2.0,本页将介绍新版百度分享的安装配置方法,请点击左侧列表查看相关章节. 二.代码结构 分享代码可以分为三个部分:HTML.设置和js加载,示例如下: 代码结 ...