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

　　

//代码如下

<!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. HDU 4699 Editor(模拟 对顶栈)

    题目大意: 给定一个整数序列 维护5种操作 次数<1e6 I x: 光标位置插入x 然后光标位于x之后 D: 删除光标前一个数 L: 光标左移 R: 光标右移 Q k: 询问位置k之前的最大前缀 ...

  2. 洗牌利器——random.shuffle()函数

    random.shuffle()是一个非常实用但是又非常容易被忽略的函数,shuffle在英语里是"洗牌"的意思,该函数非常形象地模拟了洗牌的过程,即: random.shuffl ...

  3. Jmeter_用户定义的变量

    1.线程组->添加->配置原件->用户定义的变量 2.自定义变量引用: ${ }

  4. LeetCode 79.单词搜索 - JavaScript

    题目描述:给定一个二维网格和一个单词,找出该单词是否存在于网格中. 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中"相邻"单元格是那些水平相邻或垂直相邻的单元格.同一个单 ...

  5. FastStone Capture 截图工具

    主要功能介绍 截屏 包括了全屏截取,当前活动窗口截取,截取选定区域,多边形截取和截取滚动页面等,基本上常用的都有了.特别是滚动截取,许多朋友为了这个功能,不惜安装各种重量级的截屏软件,甚至四处下载各种 ...

  6. spring boot 整合 Camunda

    官网:https://camunda.com/ 论坛:https://forum.camunda.org/ 一. 创建 spring boot 项目,添加项目依赖 <?xml version=& ...

  7. springmvc启动加载指定方法

    官网: https://docs.oracle.com/javaee/7/api/javax/annotation/PostConstruct.htmlblog:https://blog.csdn.n ...

  8. 在Centos上安装Postgre SQL

    检查PostgreSQL 是否已经安装 rpm -qa | grep postgres 检查PostgreSQL 是否已经安装 rpm -qal | grep postgres 检查PostgreSQ ...

  9. WebMagic基础与Maven管理依赖

    2. 快速开始 WebMagic主要包含两个jar包:webmagic-core-{version}.jar和webmagic-extension-{version}.jar.在项目中添加这两个包的依 ...

  10. JAVA--文件内容属性替换

    说明:文件中执行内容是变量,随着环境不同会配置不同,在程序启动后,读取配置进行变量替换 1.测试类如下: public class FileUtilsTest { //public static bo ...