[英]Bootstrap.js tabs doesnt work
I'm pretty lost with Bootstrap.js tabs. 我很遗憾地使用Bootstrap.js标签。 I have got this html: 我有这个HTML:
<ul class="button-menu" id="stores" data-tabs="tabs">
</ul>
<div class="tab-content" id="storesGoods">
<div class="tab-pane" id="store0">test</div>
<div class="tab-pane" id="store1">test2</div>
</div>
And I generate with JS it's content 我用JS生成它的内容
function updateShop(){
var actualStores = "";
for (var i=0;i<actualTown.store.length;i++){
actualStores=actualStores + "<li><a href='#store"+i+"' data-toggle='stores'>"+actualTown.store[i].name+"</a></li>"
$("#store"+i).html(actualTown.store[i].listGoods());
};
$("#stores").html(actualStores);
};
When I view my html via Chrome, I see that it generated this: 当我通过Chrome查看我的HTML时,我发现它生成了这个:
<ul class="button-menu" id="stores" data-tabs="tabs">
<li><a href="#store0" data-toggle="stores">24/7 Store</a></li>
<li><a href="#store1" data-toggle="stores">Liquiro</a></li>
</ul>
<div class="tab-content" id="storesGoods">
<div class="tab-pane" id="store0">
<p>24/7 Store: All day, all night, every day!</p>
<table class="table table-condensed">
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th></th>
</tr>
<tr>
<td>Bottled Water</td>
<td>0.84</td>
<td><a class="buy" onclick="buyToInventory(d1)">buy</a>
</td>
</tr>
<tr>
<td>Raush Juice</td>
<td>0.9</td>
<td><a class="buy" onclick="buyToInventory(d2)">buy</a>
</td>
</tr>
<tr>
<td>Bohemia Chips</td>
<td>0.7</td>
<td><a class="buy" onclick="buyToInventory(e2)">buy</a>
</td>
</tr>
<tr>
<td>Vodka Alosuth</td>
<td>2.7</td>
<td><a class="buy" onclick="buyToInventory(d3)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (10°)</td>
<td>0.8</td>
<td><a class="buy" onclick="buyToInventory(d7)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (12°)</td>
<td>0.98</td>
<td><a class="buy" onclick="buyToInventory(d8)">buy</a>
</td>
</tr>
<tr>
<td>Bread</td>
<td>1.2</td>
<td><a class="buy" onclick="buyToInventory(e1)">buy</a>
</td>
</tr>
<tr>
<td>Rosito Schnap</td>
<td>0.68</td>
<td><a class="buy" onclick="buyToInventory(d10)">buy</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="store1">
<p>Liquiro: Bad day? Liquiro will fix that, buy some boost for yourself and some chips.</p>
<table class="table table-condensed">
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th></th>
</tr>
<tr>
<td>Vodka Alosuth</td>
<td>2.7</td>
<td><a class="buy" onclick="buyToInventory(d3)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (10°)</td>
<td>0.8</td>
<td><a class="buy" onclick="buyToInventory(d7)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (12°)</td>
<td>0.98</td>
<td><a class="buy" onclick="buyToInventory(d8)">buy</a>
</td>
</tr>
<tr>
<td>Rosito Schnap</td>
<td>0.68</td>
<td><a class="buy" onclick="buyToInventory(d10)">buy</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
So it's generated as it's supossed to be but switching tabs doesn't work, when I click on something in ul #stores
it doesnt change tab, it just add to url www.something.com/#store0
and nothing happens. 所以它是生成的,但是切换选项卡不起作用,当我点击ul #stores
某些ul #stores
它没有更改选项卡时,它只是添加到URL www.something.com/#store0
并且没有任何反应。
Does anyone know how to make these tabs working, I'm totally lost. 有谁知道如何使这些标签工作,我完全迷失了。
Thanks for any help! 谢谢你的帮助!
There is nothing like data-toggle="store"
in bootstrap docs , it should be data-toggle="tab"
, and the plugin will figure itself out which is the right target, via the href
attribute. 在bootstrap文档中没有像data-toggle="store"
那样的东西,它应该是data-toggle="tab"
,并且插件将通过href
属性确定哪个是正确的目标。
Their example is quite straightforward, just follow it. 他们的例子很简单,只需遵循它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.