在 URL link 的基础上激活 Bootstrap 选项卡
Make Bootstrap tab Active on the bases of URL link
我有 bootstrap 个选项卡,我想在 URL link.
的基础上激活选项卡
例如:
xyz.xxx/index#tab2 应该使 tab2 在页面加载时处于活动状态。
到目前为止,这是我的代码
<div class="tab-wrap">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01">Tab 1</a></li>
<li class=""><a href="#tab2" data-toggle="tab" class="analistic-02">Tab 2</a></li>
<li class=""><a href="#tab3" data-toggle="tab" class="analistic-03">Tab 3</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active in" id="tab1">
<p> hello 1</p>
</div>
<div class="tab-pane" id="tab2">
<p> hello 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Hello 3</p>
</div>
</div> <!--/.tab-content-->
</div><!--/.tab-wrap-->
默认情况下,它使 tab1 处于活动状态,因此在我的情况下,可能会根据我的 URL links.
使第二个选项卡默认处于活动状态
假设如果我把#tab2 放在 URL 那么它应该在页面加载时默认激活 tab2。
根据您设置 JS 的方式,您应该可以这样做:
www.myurl.com/page#tab1
www.myurl.com/page#tab2
www.myurl.com/page#tab3
其中#tab1
、#tab2
和#tab3
等于选项卡的id
编辑
看这里:
Twitter Bootstrap - Tabs - URL doesn't change
您可以使用 jquery 这样的方法来实现它。
你的 URL 例如 "www.myurl.com/page#tab1";
var url = window.location.href;
从 url link 获取要激活的选项卡。
var activeTab = url.substring(url.indexOf("#") + 1);
删除旧的活动选项卡class
$(".tab-pane").removeClass("active in");
将活动 class 添加到新标签页
$("#" + activeTab).addClass("active in");
或者获取activeTab后直接打开tab
$('a[href="#'+ activeTab +'"]').tab('show')
- 从 URL 获取哈希并显示活动选项卡
- 将当前哈希设置为 URL
您可以使用此代码:
$(function(){
var hash = window.location.hash;
hash && $('ul.nav.nav-pills a[href="' + hash + '"]').tab('show');
$('ul.nav.nav-pills a').click(function (e) {
$(this).tab('show');
$('body').scrollTop();
window.location.hash = this.hash;
});
});
您可以将 ID 添加到 <ul class="nav nav-tabs nav-stacked" id="myTab">
,然后使用以下 javascript 代码:
$(document).ready(() => {
let url = location.href.replace(/\/$/, "");
if (location.hash) {
const hash = url.split("#");
$('#myTab a[href="#'+hash[1]+'"]').tab("show");
url = location.href.replace(/\/#/, "#");
history.replaceState(null, null, url);
setTimeout(() => {
$(window).scrollTop(0);
}, 400);
}
$('a[data-toggle="tab"]').on("click", function() {
let newUrl;
const hash = $(this).attr("href");
if(hash == "#home") {
newUrl = url.split("#")[0];
} else {`enter code here`
newUrl = url.split("#")[0] + hash;
}
newUrl += "/";
history.replaceState(null, null, newUrl);
});
});
更多详情follow this link。
如果只想根据url触发,也可以按照
$(function(){
var hash = window.location.hash;
if(hash != ''){
$("a[href='"+url+"']").click();
}
})
$(function(){
var url = window.location.href;
var activeTab = url.substring(url.indexOf("#") + 1);
if($.trim(activeTab) == 'Exhibitor') // check hash tag name for prevent error
{
$(".tab-pane").removeClass("active in");
$("#" + activeTab).addClass("active in");
$('a[href="#'+ activeTab +'"]').tab('show');
}
});
使用 URL API 中的 URL()
构造函数:
URL {
href: "https://whosebug.com/posts/67036862/edit",
origin: "https://whosebug.com",
protocol: "https:",
username: "",
password: "",
host: "whosebug.com",
hostname: "whosebug.com",
port: "",
pathname: "/posts/67036862/edit",
search: ""
}
在 URL link:
的基础上激活 Bootstrap 选项卡
$(function() {
/**
* Make Bootstrap tab Active on the bases of URL link
*/
const loc = new URL(window.location.href) || null
if (loc !== null) {
console.debug(loc)
if (loc.hash !== '') {
$('.tab-pane').removeClass('active in')
$(loc.hash).addClass('active in')
$(`a[href="${ loc.hash }"]`).tab('show')
}
}
})
我有 bootstrap 个选项卡,我想在 URL link.
的基础上激活选项卡例如:
xyz.xxx/index#tab2 应该使 tab2 在页面加载时处于活动状态。
到目前为止,这是我的代码
<div class="tab-wrap">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01">Tab 1</a></li>
<li class=""><a href="#tab2" data-toggle="tab" class="analistic-02">Tab 2</a></li>
<li class=""><a href="#tab3" data-toggle="tab" class="analistic-03">Tab 3</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active in" id="tab1">
<p> hello 1</p>
</div>
<div class="tab-pane" id="tab2">
<p> hello 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Hello 3</p>
</div>
</div> <!--/.tab-content-->
</div><!--/.tab-wrap-->
默认情况下,它使 tab1 处于活动状态,因此在我的情况下,可能会根据我的 URL links.
使第二个选项卡默认处于活动状态假设如果我把#tab2 放在 URL 那么它应该在页面加载时默认激活 tab2。
根据您设置 JS 的方式,您应该可以这样做:
www.myurl.com/page#tab1
www.myurl.com/page#tab2
www.myurl.com/page#tab3
其中#tab1
、#tab2
和#tab3
等于选项卡的id
编辑
看这里: Twitter Bootstrap - Tabs - URL doesn't change
您可以使用 jquery 这样的方法来实现它。 你的 URL 例如 "www.myurl.com/page#tab1";
var url = window.location.href;
从 url link 获取要激活的选项卡。
var activeTab = url.substring(url.indexOf("#") + 1);
删除旧的活动选项卡class
$(".tab-pane").removeClass("active in");
将活动 class 添加到新标签页
$("#" + activeTab).addClass("active in");
或者获取activeTab后直接打开tab
$('a[href="#'+ activeTab +'"]').tab('show')
- 从 URL 获取哈希并显示活动选项卡
- 将当前哈希设置为 URL
您可以使用此代码:
$(function(){
var hash = window.location.hash;
hash && $('ul.nav.nav-pills a[href="' + hash + '"]').tab('show');
$('ul.nav.nav-pills a').click(function (e) {
$(this).tab('show');
$('body').scrollTop();
window.location.hash = this.hash;
});
});
您可以将 ID 添加到 <ul class="nav nav-tabs nav-stacked" id="myTab">
,然后使用以下 javascript 代码:
$(document).ready(() => {
let url = location.href.replace(/\/$/, "");
if (location.hash) {
const hash = url.split("#");
$('#myTab a[href="#'+hash[1]+'"]').tab("show");
url = location.href.replace(/\/#/, "#");
history.replaceState(null, null, url);
setTimeout(() => {
$(window).scrollTop(0);
}, 400);
}
$('a[data-toggle="tab"]').on("click", function() {
let newUrl;
const hash = $(this).attr("href");
if(hash == "#home") {
newUrl = url.split("#")[0];
} else {`enter code here`
newUrl = url.split("#")[0] + hash;
}
newUrl += "/";
history.replaceState(null, null, newUrl);
});
});
更多详情follow this link。
如果只想根据url触发,也可以按照
$(function(){
var hash = window.location.hash;
if(hash != ''){
$("a[href='"+url+"']").click();
}
})
$(function(){
var url = window.location.href;
var activeTab = url.substring(url.indexOf("#") + 1);
if($.trim(activeTab) == 'Exhibitor') // check hash tag name for prevent error
{
$(".tab-pane").removeClass("active in");
$("#" + activeTab).addClass("active in");
$('a[href="#'+ activeTab +'"]').tab('show');
}
});
使用 URL API 中的 URL()
构造函数:
URL {
href: "https://whosebug.com/posts/67036862/edit",
origin: "https://whosebug.com",
protocol: "https:",
username: "",
password: "",
host: "whosebug.com",
hostname: "whosebug.com",
port: "",
pathname: "/posts/67036862/edit",
search: ""
}
在 URL link:
的基础上激活 Bootstrap 选项卡$(function() {
/**
* Make Bootstrap tab Active on the bases of URL link
*/
const loc = new URL(window.location.href) || null
if (loc !== null) {
console.debug(loc)
if (loc.hash !== '') {
$('.tab-pane').removeClass('active in')
$(loc.hash).addClass('active in')
$(`a[href="${ loc.hash }"]`).tab('show')
}
}
})