<!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. zk使用原理

    ZooKeeper的基本原理 ZNode的基本概念 ZooKeeper数据模型的结构与Unix文件系统很类似,整体上可以看作是一棵树,每个节点称做一个ZNode.每个ZNode都可以通过其路径唯一标识 ...

  2. Java 注解实例

    package com.annotation; import java.lang.annotation.Retention; import java.lang.annotation.Target; i ...

  3. java.lang.NoSuchMethodError: org.json.JSONArray.iterator()Ljava/util/Iterator 阿里云短信

    请尝试使用 <dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk ...

  4. 基于Java的简易表达式解析工具(二)

    之前简单的介绍了这个基于Java表达式解析工具,现在把代码分享给大家,希望帮助到有需要的人们,这个分享代码中依赖了一些其他的类,这些类大家可以根据自己的情况进行导入,无非就是写字符串处理工具类,日期处 ...

  5. [PY3]——对iterator的处理（解析式、map、reduce、filter）

    引言 对iterator一般可以用for in方法处理,但有时可以借助更高效.也更易读的方式去处理. 例如解析式(包括列表解析式.生成器解析式.集合解析式.字典解析式), 例如map( ).reduc ...

  6. 任务三十七：UI组件之浮出层

    任务三十七:UI组件之浮出层 面向人群: 有一定JavaScript基础 难度: 低 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量 ...

  7. Linux系统资源查看 之 资源信息

    1. 系统 版本信息 内核版本 使用 uname 命令: -a : 查看所有系统信息 -r : 查看内核版本信息 -s : 查看内核名称 代码如下: [niesh@niesh ~]$ uname -a ...

  8. awk把第1列相同的第2列按“；”拼起来，最后输出第1列和拼起来的结果

    [root@localhost cc]# cat 2.txt adc 3 5 a d aa 3 adfa d ba 3 adf 第1列相同的第2列按";"拼起来,最后输出第1列和拼 ...

  9. [转]C#综合揭秘——Entity Framework 并发处理详解

    本文转自:http://www.cnblogs.com/leslies2/archive/2012/07/30/2608784.html 引言 在软件开发过程中,并发控制是确保及时纠正由并发操作导致的 ...

  10. sql中的分页实现

    1.两种方式 1.1:row_number() over()函数 1.2:OFFSET ....FETCH OFFSET { integer_constant | offset_row_count_e ...