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

　　

//代码如下

<!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. 【原】简单shell练习（五）

    1.查询一个文件中某个单词出现的次数 # grep -o 'ts' ./test/txt |wc -l 2.统计当前文件夹下文件的个数 ls -l |grep "^-"|wc -l ...

  2. Python语言——列表生成式

    生成[1x1, 2x2, 3x3, ..., 10x10]列表: >>> L = [] >>> for x in range(1, 11):... >> ...

  3. codeforces- Shortest path of the king

    The king is left alone on the chessboard. In spite of this loneliness, he doesn't lose heart, becaus ...

  4. 子元素使用position：fixed,导致他的宽度不能和父元素保持一致的解决方案

    最近在编码过程中,遇到过这样一个问题,代码如下,我们有一个父级,他有一定的宽度,在他的里面有两个子级,其中一个是绝对定位的,且要求他们的宽度都和父级保持一致,然后问题就出现了,我们会发现,有了定位的s ...

  5. SVN安装不成功，提示Invalid driver H:

    本来我的SVN安装在H盘,后来我把包含H盘的硬盘下下来了,这样H盘就不存在了. 这时候我想重新安装SVN,点击安装包,结果提示Invalid driver H,怎么都不能安装成功. 这时候我去注册表里 ...

  6. Python - 同时运行两个以上的脚本

    在c.py中 import os os.system("python a.py") os.system("python b.py")

  7. 「快学SpringBoot」配置文件的加载顺序和配置项默认值设置

    前言 有的时候,配置信息是我们无法在开发过程中就能确定的.比如,给客户开发的项目,客户需要根据自身的情况自定义配置,如数据库配置,加密密钥配置等等.这时候,就需要把配置文件放在外面,让用户自定义配置部 ...

  8. 关于java程序在运行时出现a java exception has occured时解决方法

    错误截图: 出现情况原因分析: 1.环境没有配置好,配置java环境变量: 参考 检查是否正确,java javac,可以尝试重新 2.查看使用的jdk版本是否存在版本问题: 例如jdk1.7对中文的 ...

  9. JS原型链的理解和使用（一）

    一些个人的理解,不一定是对的,仅供参考. 在JS中有函数和对象两个概念,而又有一切皆对象的概念及函数也是一个对象.所以可以说函数一定可以作为一个对象,而对象不一定是一个函数. 也可以说在js中对象分为 ...

  10. Python学习第十九课——类的装饰器

    类的装饰器 # def deco(func): # print('==========') # return func # # # @deco #test=deco(test) # # def tes ...