//需求：鼠标放在不同的导航栏上，下面显示的内容自动切换

　　

//代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

<style type="text/css">

  *{

         margin: 0;

         padding: 0;

      }

      ul{

         list-style: none;

      }

      .tab{

         width: 300px;

         border: 1px solid #000;

         overflow: hidden;

         background-color: #ddd;

      }

      .tab li{

         height: 30px;

         line-height: 30px;

         width: 50px;

         float: left;

         text-align: center;

      }

      .tab .act{

         height: 28px;

         line-height: 28px;

         border-top: 2px solid orange;

         background-color: white;

      }

      .con{

         width: 300px;

         border:1px solid #000;

      }

      .con li{

         height: 300px;

         display: none;

         text-align: center;

         line-height: 300px;

      }

      .con .show{

         display: block;

      }

</style>

</head>

<body>

  <ul class="tab">

      <li class="act">图片</li>

      <li>专栏</li>

      <li>热点</li>

   </ul>

   <ul class="con">

      <li class="show">图片</li>

      <li>专栏</li>

      <li>热点</li>

   </ul>

<script type="text/javascript">

$(".tab li").mouseover(function(){

         // 进入元素的索引,找到当前li的索引

         var index = $(this).index();

         //console.log(index);

         // tab栏的切换

         $(this).addClass("act").siblings().removeClass("act");

         // con栏的切换

         $(".con li").eq(index).addClass("show").siblings().removeClass("show");

})

</script>

</body>

</html>

Jquery实现横向tab切换的更多相关文章

  1. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  2. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

  3. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  4. 封装jQuery插件实现TAB切换

    先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  5. jquery时间轴tab切换效果实现结合swiper实现滑动显示效果

    需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果 根据transform: translateX进行左侧切换效果的实现(具体实现cs ...

  6. jQuery 练习：tab 切换

    实现内容随菜单切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. jquery中简易tab切换

    <!doctype html> <html> <head> <title>test</title> <meta content=&qu ...

  8. 一款jquery写出来的tab切换

    当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...

  9. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

随机推荐

  1. Linux终端的一些快捷键命令

    一.初识linux的终端种类:本地.远程 查看本终端命令: #tty 命令,看到当前所处的终端 #(w)who 命令,看到系统中所有登录的用户 其中,tty 终端为表示在本地命令行模式下打开的终端:p ...

  2. 人工神经网络(从原理到代码） Step 01 感知器 梯度下降

    版权声明: 本文由SimonLiang所有,发布于http://www.cnblogs.com/idignew/.如果转载,请注明出处,在未经作者同意下将本文用于商业用途,将追究其法律责任. 感知器 ...

  3. linux命令行大全第四章[通配符的使用]

    通配符示例 1.创建几个文件及目录 补充创建一个以大写字母开头的文件. 2.1显示所有文件及目录 2.2显示所有以1开头的文件及目录 2.3显示以a开头.txt结尾的文件 2.4显示以e开头,后跟任意 ...

  4. php 基础知识 post 和get 两种传输方式的区别

    1.post更安全(不会作为url的一部分,不会被缓存.保存在服务器日志.以及浏览器浏览记录中) 2.post发送的数据量更大(get有url长度限制) 3.post能发送更多的数据类型(get只能发 ...

  5. 使用xshell给阿里云服务器安装mysql

    1. 安装mysql https://www.jianshu.com/p/ce53320dcfbd 2. 获取mysql 5.7随机生成的密码 https://www.yanning.wang/arc ...

  6. spark-调节executor堆外内存

    什么时候需要调节Executor的堆外内存大小? 当出现一下异常时: shuffle file cannot find,executor lost.task lost,out of memory 出现 ...

  7. android的ListAdapter简单用法

    ListAdapter是一个整个Activity有且仅有一个ListView控件的Activity 使用步骤:1. 创建MyListViewAdapter(类名可以自定义) extends ListA ...

  8. Java基础 -4

    IF分支结构 在程序开发的过程中 一共会存在有三组程序逻辑:顺序结构.分支结构.循环结构 if分支结构主要是针对关系表达式进行判断处理的分支操作. if判断 public static void ma ...

  9. Controller层注解

    /** * Copyright © 2012-2014 <a href="https://github.com/thinkgem/jeesite">JeeSite< ...

  10. SpringBoot图文教程3—「‘初恋’情结」集成Jsp

    有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 文章结尾配套自测面试题,学完技术自我测试更扎实 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例 ...