bootstrap tab切换如何让鼠标移动自动切换内容

  bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示。bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移动到“资讯中心”不用鼠标单击就马上显示相应的文章列表。

  这个案例中用两次调用nav-tabs切换,如果不需要可以删除第二次调用,并删除javascript语句中的tabs-4、5、6就可以了

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Bootstrap tabs选项卡 鼠标经过效果</title>  
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>  
<body>  
<div class="container">  
  <div class="row">  
    <ul class="nav-tabs nav" id="tabs1">  
      <li class="active"><a href="#tabs-1">关于我们 </a></li>  
      <li><a href="#tabs-2">资讯中心</a></li>  
      <li><a href="#tabs-3">联系我们 </a></li>  
    </ul>  
    <div class="tab-content" style="height: 80px; padding-top: 0.6em; border-bottom: dashed #ddd 2px;">  
      <div class="tab-pane active" id="tabs-1">  
        <p>***工程有限公司是一家专业的装修服务机构<br/>
            省心,省力,省时更省钱<br/>
            轻松装修时代。 </p>  
      </div>  
      <div class="tab-pane" id="tabs-2">  
        <ul>  
          <li><a href="#" target="_blank">室内家具摆放 切忌四种摆放方法</a></li>  
          <li><a href="#" target="_blank">成就家居客厅好风水需要注意的六</a></li>  
          <li><a href="#" target="_blank">九款创意背景墙设计</a></li>  
        </ul>  
      </div>  
      <div class="tab-pane" id="tabs-3">  
        <p>电话:13800000000<br/>  
          QQ:17000000<br/>  
             地址:厦门**** </p>  
      </div>  
    </div>  
  </div>  
  <div style="height: 2em;"></div>
  <!--第二次调用-->
  <div class="row">  
    <ul class="nav-tabs nav" id="tabs2">  
      <li class="active"><a href="#tabs-4">客厅 </a></li>  
      <li><a href="#tabs-5">房间</a></li>  
      <li><a href="#tabs-6">厨房</a></li>  
    </ul>  
    <div class="tab-content" style="height: 80px; padding-top: 0.6em; border-bottom: dashed #ddd 2px;">  
      <div class="tab-pane active" id="tabs-4">  
        <p>客厅欧式装修方案大全</p>  
      </div>  
      <div class="tab-pane" id="tabs-5">  
        <p>房间海洋风装修方案</p> 
      </div>  
      <div class="tab-pane" id="tabs-6">  
        <p>厨房高大上装修案例展示</p>  
      </div>  
    </div>  
  </div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(八):数据库字段的定义(下)

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

862
来自专栏张戈的专栏

仿异次元百度分享工具条张戈修改版

只要不是高度近视,就会发现张戈博客的文章最近加上了这个仿异次元百度分享工具条。增加这个跟随横条的初衷,其实是最近启用百度两侧漂浮广告后,发现博客左侧的分享条以及...

4098
来自专栏编程

UG数控编程“新手必看”

1.坐标详解 1. 绝对坐标系:是模型空中的概念性位置和方向,将绝对坐标系为X=0,Y=0,Z=0.不可见不能移动。 2. 视图三重轴:是在建模最左下角有个正方...

1829
来自专栏freesan44

iOS 10中如何搭建一个语音转文字框架

原文:Building a Speech-to-Text App Using Speech Framework in iOS 10

552
来自专栏北京马哥教育

Python的10大集成开发环境和代码编辑器(指南)

来源:Python程序员 ID:pythonbuluo 使用IDLE或者Python Shell来编写Python是非常适合于简单程序的,但是这些工具往往将大...

4099
来自专栏玄魂工作室

CTF实战31 综合实战和讲解一

该培训中提及的技术只适用于合法CTF比赛和有合法授权的渗透测试,请勿用于其他非法用途,如用作其他非法用途与本文作者无关

501
来自专栏更流畅、简洁的软件开发方式

【视频】自然框架源码的类库、控件、模块的总体简介

  我的自然框架开源好久了,看博客园的文件下载次数,已经被下载几千次了。可能有些人打开一看,好几个项目,一大堆的文件,随便找了一个,看不懂。再运行一下,咦怎么少...

2009
来自专栏企鹅号快讯

盘点 2017年Python 领域值得关注的 5 个库、工具和开发者

今年 Python 增长迅猛,也有了不少新东西,在这里推荐 5 个值得在 2018 年继续关注的库、工具和开发者,看看有没有你没听过的? 值得关注的 5 个 P...

1878
来自专栏老九学堂

程序员必备辅助开发工具总结

工欲善其事必先利其器,拥有简捷的开发辅助工具能大大提高我们的开发效率。老九君给大家总结了一些常用的辅助开发的工具,希望大家能喜欢,闲话不多说,马上开始~! N...

2243
来自专栏FreeBuf

如何像黑客军团主角那样将文件隐藏在音频中

这些年来黑客军团(Mr. Robot)一直是我最喜欢的电视剧,演员Rami Malek所扮演的有社交焦虑症,游离于肤浅而物质的社会之边缘却又想让世界更美好的年轻...

2118

扫描关注云+社区