bootstrap tab切换如何让鼠标移动自动切换内容-阿里云开发者社区

开发者社区> ytkahcom> 正文

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

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

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

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>
<!--第二次调用结束-->
<script> $(function () { $("#tabs1 a").mousemove(function (e) { $(this).tab('show'); }); $("#tabs2 a").mousemove(function (e) { $(this).tab('show'); }); $("#tabs3 a").mousemove(function (e) { $(this).tab('show'); }); $("#tabs4 a").mousemove(function (e) { $(this).tab('show'); }); $("#tabs5 a").mousemove(function (e) { $(this).tab('show'); }); $("#tabs6 a").mousemove(function (e) { $(this).tab('show'); }); }); </script> </div> </body> </html>

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Fragment实现微信Tab界面(不可通过界面左右拖动切换界面,只可以由按钮切换)
Fragment实现微信Tab界面(不可通过界面左右拖动切换界面,只可以由按钮切换)
3016 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6986 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7805 0
+关注
ytkahcom
ytkah常记录一些开发笔记,含微信公众平台、小程序、Dedecms、帝国cms、Finecms、thinkphp、mysql等,期待与您共成长!
669
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载