数据切换=选项卡不工作

【问题标题】：data-toggle=tab not working数据切换=选项卡不工作
【发布时间】：2015-02-04 15:52:53
【问题描述】：

我正在尝试在我的页面上实现一个选项卡式标题，如下所示。

<ul class="nav nav-tabs">
    <li><a href="abc.cfm" data-toggle="tab">page One</a></li>
    <li><a data-toggle="tab" href="def.cfm">page Two</a></li>
    <li><a data-toggle="tab" href="xyz.cfm">page three</a></li>                           
</ul>

我可以使用它导航到一个新页面，如上面在 href 上显示的那样吗？我为此查找了示例，但它们显示数据从同一页面切换，而不是导航到另一个页面。感谢任何建议。谢谢。

【问题讨论】：

只需取出数据开关，它应该可以作为正常链接使用。

标签： jquery twitter-bootstrap coldfusion

【解决方案1】：

data 属性本身什么也不做。出于您的目的，您应该添加一些 javascript 代码。让我们清理一下。

在 HTML 中使用 data-toggle 来存储要显示的页面的 id

<ul class="nav nav-tabs">
    <li data-toggle="page1">page One</li>
    <li data-toggle="page2">page Two</li>
    <li data-toggle="page3">page three</li>                           
</ul>

<div class="page" id="page1">Content Page 1</div>
<div class="page" id="page2">Content Page 2</div>
<div class="page" id="page3">Content Page 3</div>

在 Javascript 中显示该页面（基于被点击元素的 id）

$('[data-toggle]').click(function(){
    $('.page').hide();
    var pageId = $(this).data('toggle');
    $('#'+pageId).show();
})

看看这个demo here

【讨论】：