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

　　

//代码如下

<!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. 第3章 Java基本的程序设计结构

    3.运算符 浅谈java中源码常见的几个关键字(native,strictfp,transient,volatile) 需要注意 , 整数被 0 除将会产生一个异常, 而浮点数被0 除将会得到无穷大或 ...

  2. 【Fine学习笔记】Jmeter笔记

    熟悉几个专有名词: 1.测试计划是顺序执行的,一个性能测试必须有的三部分:测试计划.线程组.sampler(采样器)--核心 2.控制器(用来定义请求执行的):loop if else 3.timer ...

  3. 研究Zookeeper的原理（二）

    阅读声明:以下内容是结合网上材料及工作内容所写的个人理解,如有不当,欢迎大家指正~~~谢谢啦 一.ZooKeeper的选举机制.FailOver机制 我们知道ZooKeeper在分布式环境中协调服务, ...

  4. MATLAB的安装与入门

    最近安装了MATLAB来用,过程遇到很多问题,担心自己改天如果换电脑了就忘记一些安装问题,所以记录一个. 首先是资源问题,我在贴吧找到了好心人分享的破解资源(非常感谢好心人的资源(ง •_•)ง),然 ...

  5. wpf表单验证

    在做表单的,需要对User提交数据做验证,wpf与silverlight 都提供自带的验证机制,但是只是验证,并不能在提交时提供详细的信息,此时可使用 依赖属性将错误信息整合进自定义错误集合中,即可在 ...

  6. android的ListAdapter简单用法

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

  7. Layui我提交表单时，table.reload(),表格会请求2次，是为什么？

    重载两次是因为搜索按钮用的是button 改成<a class="layui-btn" data-type="reload">搜索</a> ...

  8. 「模板」可持久化 HFQ-Treap

    老师用的是静态数组的写法,开了很多数组- 其实个人更倾向于 struct 或者用 class 封装起来. 但是鉴于太难打 好吧,是我懒得打. 然后就借鉴了老师的模板,写出了属于自己的 压行 风格. 代 ...

  9. js获取一个页面 是从哪个页面过来的

    document.referrer 获取来源页面的url console.log(document.referrer) if(document.referrer=="http://127.0 ...

  10. 关于JDK+Tomcat+eclipse+MyEclipse的配置方法

    说一下关于JDK+Tomcat +eclipse+MyEclipse的配置方法: 1.jdk的配置 我用的是jdk1.6版本,与jdk1.5方法相同.执行完安装程序后就要在进行一下配置,步骤如下:右键 ...