拥Bootstrap入怀——tab标签页篇


置顶文章:《纯CSS打造银色MacBook Air(完整版本)》

上一篇:《为了我那么忘却的记忆一旦做的笔记》

作者主页:myvin
博主QQ:851399101(点击QQ和博主发起临时会话)


描绘在前边

于该博文中,依旧做自己做的死景致网页来聊一下Bootstrap的施用,网页截图如下:

图片 1

一体化网页的效益与代码可以点击这里查看或到CodePen落得查看。我们还在此处又一下夫网页要高达的几只第一成效,看了上亦然篇博文《拥Bootstrap入怀——幻灯片好屏轮播篇》的同窗可以直接跨越了就无异段子了:

  1. 导航栏的登陆、注册按钮点击后弹来登陆、注册modal约,并且登陆、注册窗口可切换,菜单栏为响应式

  2. 导航栏中之山水挑可下拉,点击下拉中之九寨沟``丽江``水帘洞会面稳定到相应的tab

  3. 幻灯片大屏轮播

  4. tab标签页

《拥Bootstrap入怀——幻灯片好屏轮播篇》中我们简要且了聊大屏幻灯片轮播的相干内容,再之前大凡导航栏的始末,今天咱们还聊聊tab标签页这片。想先押一下tab标签页效果实现的得点击这里查看。

tab标签页

先是是三单标签的代码:

<ul class="nav nav-tabs" role="tablist" id="tab-list">
 <li class="active"><a href="#jiuzhaigou" role="tab" data-toggle="tab">九寨沟</a></li>
 <li><a href="#lijiang" role="tab" data-toggle="tab">丽江</a></li>
 <li><a href="#shuiliandong" role="tab" data-toggle="tab">水帘洞</a></li>
</ul>

据自己之需自行添加一定数量的li链接即可,其中,在这里安装ida链接下的href性能,是为以后实现点击导航栏中之景色下拉下的老三只链接能超过反到tab相应的标签页,这同有于底下聊。

      <div class="tab-content">
        <div class="tab-pane active" id="jiuzhaigou">
          <div class="row feature">
            <div class="col-md-7">
              <h2 class="feature-heading">九寨沟</h2>
              <p class="lead">九寨沟国家级自然保护区位于四川省阿坝藏族羌族自治州九寨沟县境内,是中国第一个以保护自然风景为主要目的的自然保护区。</p>
            </div>
            <div class="col-md-5">
              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_jiuzhaigou.jpg" alt="scenery1" class="img-circle">
            </div>
          </div>
        </div>
        <div class="tab-pane" id="lijiang">
          <div class="row feature">
            <div class="col-md-5">
              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_lijiang.jpg" alt="scenery2" class="img-circle">
            </div>
            <div class="col-md-7">
              <h2 class="feature-heading">丽江小“丽”</h2>
              <p class="lead">丽江古城,又名“大研古镇”,海拔2,400米(旅游要防内源氧缺乏症),是丽江纳西族自治县的中心城市,是中国历史文化名城之一,世界文化遗产。</p>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="shuiliandong">
          <div class="row feature">
            <div class="col-md-7">
              <h2 class="feature-heading">水帘洞好“浪”</h2>
              <p class="lead">桐柏山水帘洞位于河南省南阳市桐柏县城西5公里处,风景宜人,是国家级风景名胜区桐柏山淮源风景名胜区著名景点之一。</p>
            </div>
            <div class="col-md-5">
              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_shuiliandong.jpg" alt="scenery3" class="img-circle">
            </div>
          </div>
        </div>
      </div>

标签页的内容在了一个classtab-contentdiv着,其中蕴藏3独div,分别指向承诺着三个标签的内容。

在这段代码中:<div class="tab-pane active" id="jiuzhaigou">id值和前边的竹签中之href相对应,active好像标志初始化默认激活的标签页是呀一个。这三单标签页的显示方式略发差别,第一独标签页文字内容在左,图片以右侧,第二单标签页文字在右边,图片于错,第三独标签页和率先独一样,这样做无非是为了视觉上的相同种交替感。

兑现方式就是拿富含文字的div跟含图表的div的逐一颠倒即可。其中文用了一个col-md-7看似实现了占7个列宽,图片用了col-md-5仿佛实现了占据5只列宽,同时为于图片上加了一个img-circle好像,使图片为周展现。

现一个签页算是得了,我们重新来加点淡入淡出的功力。

加以淡入淡出效果无非待在标签包含标签内容的div里添加fade恍如即可,但是出几许要注意,需要在首先标明签页上助长in类:

如下:

<div class="tab-pane fade in active" id="jiuzhaigou">
<div class="tab-pane fade" id="lijiang">
<div class="tab-pane fade" id="shuiliandong">

如此,当点击标签进行标签页切换的当儿即便会见起淡入淡出的效用,当然,在导航栏上切换标签页也会见来淡入淡出的功用。

导航栏跳反至tab标签页

咱俩而的效能是导航栏的景观下拉着之老三单链接给点击后会见超越反至对应的点刚做好的价签页位置。这里就是因故到了面签中的idhref属性。

于此我们因此同样段jq实现。

俺们的思绪是这般的:在导航栏中,下拉着之老三只lihref性能分别安装为与标签中之老三个href互呼应,下面是前面的那段代码:

<li><a href="#jiuzhaigou">九寨沟</a></li>
<li><a href="#lijiang">丽江</a></li>
<li><a href="#shuiliandong">水帘洞</a></li>

然后创建一个单击事件,获取她的href性,然后让标签中的对应之标签show

个中,激活相应的价签有以下几种方式:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

论这样的笔触,代码如下:

$('.dropdown-menu a').click(function(){
    var href=$(this).attr('href');
    $('#tab-list a[href="'+href+'"]').tab('show');
}); 

如此这般便贯彻了点击链接跳转至标签页。

小结

末了一片就是模态框了,包括一个登陆的模态框,一个报了名界面的模态框,还有一个简介的模态框,同时,在登陆或报的弹奏有的模态框上也得以并行点击切换,这同样组成部分我们下回再聊。

关于Bootstrap的详尽说明文档请登陆官网进展查看。

祝福大家了之欢喜。


转载请记得说明作者与出处哦-.-
作者:myvin
原文出处:http://www.cnblogs.com/myvin/p/4763994.html


下一篇:《JavaScript的逾期调用和刹车调用》

置顶文章:《纯CSS打造银色MacBook Air(完整版本)》


相关文章