zoukankan      html  css  js  c++  java
  • 解决Twitter Bootstrap Tab URL链接问题

    例如这样的一个Tabs 代码:

    <ul class="nav nav-tabs" id="myTab">
      <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
      <li><a data-toggle="tab" href="#profile">Profile</a></li>
      <li><a data-toggle="tab" href="#settings">Settings</a></li>
    </ul> 

    解决方法

    在Tabs 页面加入如下的脚本即可通过#tag 描点链接到某个具体的Tab 页面:

    $(function(){
    // Javascript to enable link to tab
    var url = document.location.toString();
    if (url.match('#')) {
        $('#myTab a[href=#'+url.split('#')[1]+']').tab('show') ;
    }
    // Change hash for page-reload
    $('#myTab a').on('shown', function (e) {
        window.location.hash = e.target.hash;
    }); 
    })

    Twitter Bootstrap Tab 基本使用方法

    通过JavaScript启用标签(每个选项卡需要激活单独):

    $('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    }); 

    你可以激活标签通过以下几个方式:

    ('#myTab a[href="#profile"]').tab('show'); // Select tab by name
    $('#myTab a:first').tab('show'); // Select first tab
    $('#myTab a:last').tab('show'); // Select last tab
    $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) 
  • 相关阅读:
    RSA使用
    C#获取主机信息
    NSIS打包软件使用
    C#获取局域网主机
    C#实现Web链接启动应用程序
    4.布局介绍
    Server Sql 多表查询、子查询和分页
    C# File类常用方法
    Vue 使用技巧手记
    前端面试题手记
  • 原文地址:https://www.cnblogs.com/wawahaha/p/4297487.html
Copyright © 2011-2022 走看看