<!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. Golang gRPC 和 gRPC-gateway 结合使用

    一.安装 go get -u github.com/grpc-ecosystem/grpc-gateway/protoc-gen-grpc-gateway go get -u github.com/g ...

  2. CentOS6.5安装php7+nginx+mysql实现安装WordPress

    安装php7+nginx参考该博客http://blog.csdn.net/whatday/article/details/50645117 安装php7参考http://blog.csdn.net/ ...

  3. Pipenv——最好用的python虚拟环境和包管理工具

    pipenv 是Kenneth Reitz大神的作品,能够有效管理Python多个环境,各种包.过去我们一般用virtualenv搭建虚拟环境,管理python版本,但是跨平台的使用不太一致,且有时候 ...

  4. XML 实体

    实体可以简单的理解为引用数据项的方法,可以是普通的文本也可以是二进制数据. 实体可以分为通用实体和参数实体.通用实体用于XML当中,用于引用文本或者二进制数据,而参数实体只能在DTD中使用.通用实体与 ...

  5. 深入了解Java虚拟机（2）垃圾收集器与内存分配策略

    垃圾收集器与内存分配策略 由于JVM中对象的频繁操作是在堆中,所以主要回收的是堆内存,方法区中的回收也有,但是比较谨慎 一.对象死亡判断方法 1.引用计数法 就是如果对象被引用一次,就给计数器+1,否 ...

  6. [转]微信小程序之购物车 —— 微信小程序实战商城系列（5）

    本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类  —— 微信小程序实战商城 ...

  7. vs2013 sn key

    BWG7X-J98B3-W34RT-33B3R-JVYW9  

  8. [转] 如何应用设计模式设计你的足球引擎（三和四）----Design Football Game（Part III and IV）

    原文地址:http://www.codeproject.com/KB/cpp/applyingpatterns2.aspx 作者:An 'OOP' Madhusudanan 译者:赖勇浩(http:/ ...

  9. MySQL · 关系模型的基本术语

    关系:整个二维表 关系名:表格名称 元组:行数据(记录) 属性:列数据(字段/分量) 属性名:列名称(字段名) 主键:唯一确定元组的属性组(关键字) 域:属性的取值范围 关系模式:关系的描述,表示为: ...

  10. 手把手教你写一个java的orm（完）

    生成sql:select 上一篇讲了怎样生成一个sql中where的一部分,之后我们要做事情就简单很多了,就只要像最开始一样的生成各种sql语句就好了,之后只要再加上我们需要的条件,一个完整的sql就 ...