如何使用链接打开引导程序选项卡?
[英] How to open a bootstrap tabs using a link?
本文介绍了如何使用链接打开引导程序选项卡?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下引导程序选项卡代码，当我单击该选项卡时该代码正在工作，但是当我单击使用 ul > 创建的链接时，我想打开该选项卡.立>一个
但不幸的是它不起作用.我该怎么做?
html 代码:
<li><a href="index.htm#tab1">tab1</a></li><li><a href="index.htm#tab2">tab2</a></li>
<div class="容器"><div class="tabbable"><ul class="nav nav-tabs"><li class="active"><a href="#tab1" data-toggle="tab">第 1 节</a></li><li><a href="#tab2" data-toggle="tab">第 2 节</a></li><div class="tab-content"><div class="tab-pane active" id="tab1"><p>我在第 1 部分.</p>
<div class="tab-pane" id="tab2"><p>我在第 2 节.</p>
JS 代码:
解决方案
给你的 alt-nav-tabs，然后复制现有的导航JS代码.它看起来像这样:
HTML:
<!-- 将类添加到您的 <ul>元素 --><ul class="alt-nav-tabs"><li><a href="index.htm#tab1">tab1</a></li><li><a href="index.htm#tab2">tab2</a></li><div class="容器"><div class="tabbable"><ul class="nav nav-tabs"><li class="active"><a href="#tab1" data-toggle="tab">第 1 节</a></li><li><a href="#tab2" data-toggle="tab">第 2 节</a></li><div class="tab-content"><div class="tab-pane active" id="tab1"><p>我在第 1 部分.</p>
<div class="tab-pane" id="tab2"><p>我在第 2 节.</p>
JS:
<小时>
持久的标签可见性:
根据以下评论，您有一个选项卡，无论哪个选项卡处于活动状态...
<块引用>我的一个给定链接，我在一个随机选项卡上看到一个名为 tab-visible 的类自动添加.
要解决此问题，您可以使用以下代码在 HTML 加载后删除此类:
把这个脚本放在
或者……
我注意到您试图覆盖原始的 tab-visible 行为.就像现在一样，带有 tab-visible 类的选项卡将永远不可见，即使该选项卡被点击并处于活动状态.如果您从不打算在选项卡上使用 tab-visible 类，您可以在此处从原始 CSS 文档中删除样式:
http:///futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
在您的托管文件中找到该 CSS 文件，搜索 .tab-visible，然后删除该类.
I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a
but unfortunately it's not working. how can i do this?
html code:
<ul>
<li><a href="index.htm#tab1">tab1</a></li>
<li><a href="index.htm#tab2">tab2</a></li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
Js Code:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
解决方案
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
<li><a href="index.htm#tab1">tab1</a></li>
<li><a href="index.htm#tab2">tab2</a></li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
JS:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible
is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>
Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.
这篇关于如何使用链接打开引导程序选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
