页面加载活动标签与网址

时间:2016-10-17 04:22:57

标签: javascript jquery css twitter-bootstrap tabs

我有三个链接

<a href="index.php?page=tabs">Level</a>
<a href="index.php?page=tabs">Function</a>
<a href="index.php?page=tabs">Programs</a>    

我想在页面加载时调用此选项卡

php url就像这样

index.php?page=tabs(用于打开包含所有标签的页面)

<ul class="nav nav-tabs faq-cat-tabs">
   <li><a href="#faq-cat-1" class="btn btn-info" data-toggle="tab"><i class="fa fa-shield"></i> Levels</a></li>
   <li> <a href="#faq-cat-3" class="btn btn-info" data-toggle="tab"><i class="fa fa-sitemap"></i> Functions</a></li>
   <li> <a href="#faq-cat-2" class="btn btn-info" data-toggle="tab"><i class="fa fa-puzzle-piece"></i> Programme Calander</a></li>
</ul>

每次点击我想激活前一个列表中活动的不同标签

我的网址是这样的

<?php include 'Header.php';

if(isset($_GET['page'])){
    $page = trim($_GET['page']);
    include $page.'.php';

}else{
    include 'Home.php';
}

?>
<?php include 'Footer.php'; ?>

总之要在页面加载时打开标签页 我已经尝试了index.php?page=level#faq-cat-1等等但它不会工作。

3 个答案:

答案 0 :(得分:1)

假设您的网址为“www.stackoverflow.com/page#tab1”,并且您希望将tab1设为有效。

"www.xyz.com/page#tab1";

现在加载页面获取网址

var url = window.location.href;

从网址链接中获取激活标签。

var activeTab = url.substring(url.indexOf("#") + 1);

删除旧的活动标签类

$(".tab-pane").removeClass("active in");

将活动类添加到新标签页

$("#" + activeTab).addClass("active in");

或者在获得activeTab后直接打开标签。

$('a[href="#'+ activeTab +'"]').tab('show')

答案 1 :(得分:0)

在页面加载时添加此项以根据哈希

显示选项卡
# Eliminates ID cases with NA
mydata = mydata[!mydata$ID %in% mydata[!complete.cases(mydata) ,]$ID, ]

library(plyr)
# counts all the IDs
cnt = count(mydata, "ID")
# Eliminates any ID that doesn't have 2 observations
mydata[mydata$ID %in% cnt[cnt$freq == 2, ]$ID, ]

  ID time value
1  1    1     7
2  1    2     5
3  2    1     9
4  2    2     2

文档:http://getbootstrap.com/javascript/#tabs-usage

答案 2 :(得分:0)

如果使用的是Bootstrap或MDB 那么您只需检查哈希网址并点击该定位网址的tab事件

const anchor = window.location.hash;
$(`a[href="${anchor}"]`).tab('show');