bootstrap tab切换如何让鼠标移动自动切换内容
时间:2022-05-03
本文章向大家介绍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>
- Spring MVC__自定义日期类型转换器
- 解决在控制层springmvc框架发出的400状态的错误
- 解决springmvc在单纯返回一个字符串对象时所出现的乱码情况(极速版)
- MySQL日志文件之错误日志和慢查询日志详解
- 采用HTML5之"data-"机制自由提供数据
- Spring和SpringMVC父子的容器之道---[上篇]
- 快速完成(图片旋转,查看原图)
- Jsp中格式化时间戳的常用标签
- 反射+自定义注解---实现Excel数据列属性和JavaBean属性的自动映射
- 后台模板管理系统___左侧菜单数据的异步加载
- Shiro眼皮下玩ajax,玩出302 Found
- 对于JSONObject,我只是临时抱佛脚
- 总结切面编程AOP的注解式开发和XML式开发
- SpringMVC注解@RequestMapping之produces属性导致的406错误
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python 技术篇-莉莉机器人api调用方法,实例演示。免费的机器人
- Hugo Travis 完结!
- 【Python】秀儿!两行代码制作你的专属动态二维码
- Windows 技术篇-网卡物理(MAC)地址查看方法
- Go使用工厂方法实例结构体
- Java交互界面实现计算器开发设计【附函数源码】
- Python 技术篇-读取本地文件的字节数
- Golang Flag包的参数格式问题
- Python 技术篇-对音频、图片等文件进行base64编码和解码
- 图片:“给你五十行代码把我变成字符画!” 程序:“太多了,一半都用不完!”
- HTML布局标记和列表标记
- 使用frp搭建内网穿透
- CNS图表复现03—单细胞区分免疫细胞和肿瘤细胞
- C#记事本项目开发,一个可以实现批量操作的记事本!【附源码】
- Python 库引用问题:name 'json' is not defined,原因及解决办法