Question

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

<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>

我可以使用它来导航到如上图所示的新页面吗？我为此查找了示例，但它们显示了从同一页面切换的数据，而不是导航到另一个页面。任何建议都表示赞赏。谢谢。

Answer 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

data-toggle = tab不起作用

1 个答案: