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

　　

//代码如下

<!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. python - 关于json和pickle两个序列化模块的区别

    传送门 https://stackoverflow.com/a/20980488/5955399 区别 json:用于字符串(unicode text)和python基本数据类型间进行转换.优点:跨语 ...

  2. 3分钟让你的Eclipse拥有自动代码提示功能

    第一步:Window->Preferences->Java 第二步:Java->Editor->Content Assist->Auto Activation->将 ...

  3. 简单聊一聊Ansible自动化运维

    一.Ansible概述 Ansible是今年来越来越火的一款开源运维自动化工具,通过Ansible可以实现运维自动化,提高运维工程师的工作效率,减少人为失误.Ansible通过本身集成的非常丰富的模块 ...

  4. preg_replace相关问题

    preg_replace preg_replace 函数执行一个正则表达式的搜索和替换. 语法: preg_replace ( mixed $pattern , mixed $replacement ...

  5. 学习之学习--混沌大学商学院--第一课--HHR计划

    <学习之学习> 第一课:混沌初开 李善友 1,课程目标:建立个人的多元思维模型,帮助企业找到创新驱动的增长战略. 2,创新:第二曲线创新,创新理论之父熊彼特. 3,核心课:第二曲线,非连续 ...

  6. 解决HTML5（富文本内容）连续数字、字母不自动换行

    最近开发了一个与富文本相关的功能,大概描述一下:通过富文本编辑器添加的内容,通过input展示出来(这里用到了 Vue 的 v-html 指令). 也是巧合,编辑了一个只有数字组成的长文本,等到展示的 ...

  7. 报错PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target"

    今天在调用第三方HTTPS接口的时候,一直显示这个报错,然后百度很久,有2种解决方法,一个是说自己手动去导入,第二种用代码忽略证书验证.我用二种方式, 复制即用, public void test2( ...

  8. js 中一些重要的字符串方法

    String 对象方法 方法 描述 charAt() 返回在指定位置的字符. charCodeAt() 返回在指定的位置的字符的 Unicode 编码. concat() 连接两个或更多字符串,并返回 ...

  9. Python环境搭建-5 代码编辑器

    代码编辑器 Python解释器.pip工具箱和virtuanlenv虚拟环境都安装好了后,基本的Python环境就搭建好了,可以开始我们的"搬砖"之旅了.但是现在还缺一个好用的编辑 ...

  10. LeetCode 445. Add Two Numbers II（链表求和）

    题意:两个非空链表求和,这两个链表所表示的数字没有前导零,要求不能修改原链表,如反转链表. 分析:用stack分别存两个链表的数字,然后从低位开始边求和边重新构造链表. Input: (7 -> ...