引导分页和标签元素

我有使用引导像这样一个标签元素里面的一些内容：引导分页和标签元素

<div class="tab-content"> 
    <div class="tab-pane active" id="website-information"> 
     ... 
    </div> 
    <div class="tab-pane" id="personal-information"> 
     ... 
    </div> 
    <div class="tab-pane" id="payment-information"> 
     ... 
    </div> 
</div>

然后在此之后，我有一些分页元素，像这样：

<ul class="pager"> 
    <li class="previous"><a href="#website-information" data-toggle="tab">Previous</a></li> 
    <li class="next"><a href="#owner-information" data-toggle="tab">Next</a></li> 
</ul>

正如你可以看到分页按钮应该带你回到一个标签，并分别转发一个标签，而现在他们只是指向某个标签，如果你只有两个标签，但是我可能会有大约4个当我完成了。我确信有一个明显而简单的方法可以使上一个和下一个按钮实际上与标签一起工作，但我无法弄清楚。任何帮助和/或建议，将不胜感激。

这是引导程序提供的选项，用于选择先前活动的选项卡元素和下一个选项卡元素。但我不知道如何使它们工作：

$('a[data-toggle="tab"]').on('shown', function (e) { 
    e.target // activated tab 
    e.relatedTarget // previous tab 
})

来源

2013-05-27 user2371301

您将需要使用Javascript执行此操作。 HTML不具备自动检测下一个或上一个选项卡的功能。

看看jQuery，这是一些Bootstraps功能所必需的。您当然不需要使用jQuery来解决这个特定的问题或效果，这取决于您的技能水平和要求，您可以像任何现代浏览器支持一样使用常规Javascript，或者您可以更先进，并使用一些更智能的Javascript框架来做一些为你工作。

例如，看看在jQuery selectors和jQuery .children() function

编辑

你只要不是旨在使下一个和上按钮的工作标准的引导解决方案。它所做的就是传递您点击包含data-toggle="tab"的所有链接的“e”，并将其激活。

您将需要重写和修改那段代码。选择器是一个可能的解决方案的一部分，您可以选择所有的选项卡，然后让jQuery按照它们的顺序找出它们。然后可以让Next按钮调用“next（）”和Back按钮“back（）”然后基本上将活动选项卡交换为-1或+1。

来源

2013-05-27 08:16:16

我想它会需要某种类型的javascript，但我真的不知道在我的功能中做什么。 – user2371301

如果你想使用jQuery，使用jQueries选择器将为你做很多工作。我想编辑我的答案，并帮助你弄清楚你需要什么，但不幸的是我现在没有足够的时间。 –

我更新了我的问题，你可能想看看。 – user2371301

我发现了一个精巧的例子，这里的如何添加分页与引导标签： http://www.bootply.com/60206

希望这有助于！

来源

2014-03-07 00:48:36

引导分页和标签元素

回答

相关问题