twitter-bootstrap 在可选项卡引导程序的选项卡窗格中设置活动类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16611281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set class active in tab-pane of tabbable bootstrap
提问by mpgn
I try to set active a class of a table in bootstrap : http://twitter.github.io/bootstrap/components.html#navs
我尝试在 bootstrap 中设置活动的一类表：http: //twitter.github.io/bootstrap/components.html#navs
I use php and html to show my table but how can i set active some element ?
我使用 php 和 html 来显示我的表格，但如何设置一些元素的活动？
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<?php
foreach ($this->aliasRead as $key => $value):
echo '<li class="active"><a href="#'.$value[0].'" data-toggle="tab">'.$value[0].'
<button class="btn btn-danger" ><i class="icon-trash icon-white"></i></button></a>
</li>
';
endforeach;
?>
</ul>
<div class="tab-content">
<?php foreach ($this->aliasRead as $key => $value):
echo '<div class="tab-pane active" id="'.$value[0].'">';
?>
<H4>Alias redirigé vers l'adresse :
<button href="#modifalias" role="link" data-toggle="modal" class="btn btn-primary"><i class="icon-plus icon-white"></i></button>
</H4>
<table class="table table-striped">
<tbody>
<?php foreach ($value as $key => $v):
if($key > 0)
echo '<tr>
<td>'.$v.'</td>
<td>
<button class="btn btn"><i class="icon-trash"></i></button>
</td>
</tr>';
endforeach;
?>
</tbody>
</table>
<?php endforeach; ?>
</div>
</div>
In this exemple, all tab-paneare active and all liare active, i just want to set class active when i click on a : li
在此示例中，所有选项卡窗格均处于活动状态，所有li均处于活动状态，我只想在单击 a 时将类设置为活动状态：li
EDIT
编辑
i try that and it's works for the li the class is active when i click on but i try to set active the class tab-panewhen i clik on a li
我尝试，它的作品为李当我点击类处于活动状态，但我努力集中的活动类选项卡窗格当我在里短声
I try that, doesn't work.
我试过了，不行。
<script type="text/javascript">
$(function(){
$('.nav-tabs li').on('click', function(event) {
$('.nav-tabs li').removeClass('active'); // remove active class from tabs
$(this).addClass('active'); // add active class to clicked tab
});
$('.nav-tabs li').on('click', function(event) {
$('.tab-content div').removeClass('active');
$('.tab-content div').addClass('active');
});
});
</script>
The probleme is the ligne :
问题是 ligne ：
$('.tab-content div').addClass('active');
how to select the right tabpanel corresponds to li ?
如何选择正确的tabpanel对应li？
回答by fullybaked
Although you are building the page using PHP, it looks like the tab changes are handled via Javascript (unless you provide further code about how the tab change is handled)
尽管您正在使用 PHP 构建页面，但看起来选项卡更改是通过 Javascript 处理的（除非您提供有关如何处理选项卡更改的更多代码）
Assuming that is correct you need to use Javascript to handle the setting of the active class, not PHP.
假设这是正确的，您需要使用 Javascript 来处理活动类的设置，而不是 PHP。
For example
例如
$('.nav-tabs li').on('click', function(event) {
$('.nav-tabs li').removeClass('active'); // remove active class from tabs
$(this).addClass('active'); // add active class to clicked tab
});
I am basis this on some big assumptions though, i.e that you are handling tab change in JS not PHP
不过，我基于一些重大假设，即您正在处理 JS 中的选项卡更改而不是 PHP
Edit:
编辑：
Trying adding this to your tab output
尝试将此添加到您的选项卡输出
<li class="active"><a href="#'.$value[0].'" data-toggle="tab" data-id="'.$value[0].'">
Then in your Javascript replace what I suggested previously with this
然后在你的 Javascript 中用这个替换我之前建议的
$('.nav-tabs li').on('click', function(event) {
$('.nav-tabs li').removeClass('active'); // remove active class from tabs
$(this).addClass('active'); // add active class to clicked tab
$('.tab-content div').hide(); // hide all tab content
$('#' + $(this).data('id')).show(); // show the tab content with matching id
});
You will also have to hide all tab content blocks on page load except for your inital tab
除了初始选项卡外，您还必须在页面加载时隐藏所有选项卡内容块
回答by Barrie
If you're using Bootstrap, shouldn't the JavaScript for this be as simple as:
如果您使用的是 Bootstrap，那么 JavaScript 不应该像下面这样简单：
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
回答by Top Questions
Why don′t set
为什么不设置
$i=1,
$i=1,
<?php
foreach ($this->aliasRead as $key => $value):
echo '<li <?if($i ==1){echo 'class="active"';}?>><a href="#'.$value[0].'" data-toggle="tab">'.$value[0].'
<button class="btn btn-danger" ><i class="icon-trash icon-white"></i></button></a>
</li>
'; $i++
endforeach;
?>
This solves the all are active problem. I don′t understand the second, but i′ll check the project i worked on with tabs an maybe i′ll edit this post.
这就解决了all are active问题。我不明白第二个，但我会检查我用标签工作的项目，也许我会编辑这篇文章。
@fullybaked Posted the correct addition to what i wanted to research now.
@fullybaked 发布了我现在想要研究的内容的正确补充。
