<!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. BiLSTM+CRF 实体识别

    https://www.cnblogs.com/Determined22/p/7238342.html 这篇博客 里面这个公式表示抽象的含义,表示的是最后的分数由他们影响,不是直观意义上的相加. 为什 ...

  2. ASP.NET Core 中的 ORM 之 Entity Framework

    目录 EF Core 简介 使用 EF Core(Code First) EF Core 中的一些常用知识点 实体建模 实体关系 种子数据 并发管理 执行 SQL 语句和存储过程 延迟加载和预先加载 ...

  3. cgroups简单使用

    Cgroups控制系统资源的分配(cpu.mem.io) 1.cgroups概述 CGroup是Linux内核提供的可以限制.隔离进程组 (process groups) 所使用的物理资源 (如 cp ...

  4. jade——创建第一个jade模板

    什么是jade? jade是node.js的一个模板引擎,参考了haml的语法,是简写的html语言. 使用单个标签代替双标签,类似于Python,通过缩进来确定从属关系,没有结束符号,非常简洁,使用 ...

  5. Node.js缓存

    Node.js Buffer(缓冲区) JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 ...

  6. mybatis之Sql语句构建器

    SQL类: 方法 描述 SELECT(String) SELECT(String...) 开始或插入到 SELECT子句. 可以被多次调用,参数也会添加到 SELECT子句. 参数通常使用逗号分隔的列 ...

  7. 修改request请求参数

    本质上来讲,request请求当中的参数是无法更改的,也不能添加或者删除: 但在后台程序中,一般对request的参数的操作,都是通过request的getParameter.getParameter ...

  8. MySQL的异步复制、全同步复制与半同步复制

    异步复制 异步复制,主库将事务 Binlog 事件写入到 Binlog 文件中,此时主库只会通知一下 Dump 线程发送这些新的 Binlog,然后主库就会继续处理提交操作,而此时不会保证这些 Bin ...

  9. Code Signal_练习题_All Longest Strings

    Given an array of strings, return another array containing all of its longest strings. Example For i ...

  10. CSS 高度(css height)

    DIV+CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度.使用CSS属性单词height.单位可以使用PX,em等常用使用PX(像素)为ht ...