Question

我有用于实现网站标签的代码

 <span style=" float: left; width: 131px; padding: 8px 0px 8px 0px;color: #fff; font-size: 20px;background: none; text-align: left; margin: 0% 0% 0% 9%;" > 6 more steps :</span>
                <input type="radio" name="sky-tabs" checked="" id="sky-tab1" class="sky-tab-content-1">
                <label for="sky-tab1"><span><span> <i class="fa fa-angle-double-right"></i> Travel Data
</span></span></label>

                <input type="radio" name="sky-tabs" id="sky-tab2" class="sky-tab-content-2">
                <label for="sky-tab2"><span><span> <i class="fa fa-angle-double-right"></i> Hotels
</span></span></label>

                <input type="radio" name="sky-tabs" id="sky-tab3" class="sky-tab-content-3">
                <label for="sky-tab3"><span><span> <i class="fa fa-angle-double-right"></i> Activities
</span></span></label>

                <input type="radio" name="sky-tabs" id="sky-tab4" class="sky-tab-content-4">
                <label for="sky-tab4"><span><span> <i class="fa fa-angle-double-right"></i> Transfers
</span></span></label>
                <input type="radio" name="sky-tabs" id="sky-tab5" class="sky-tab-content-5">
                <label for="sky-tab5"><span><span> <i class="fa fa-angle-double-right"></i> Summary
</span></span></label>
                <input type="radio" name="sky-tabs" id="sky-tab6" class="sky-tab-content-6">
                <label for="sky-tab6"><span><span> Payment
</span></span></label>

然后我需要在本节其余部分中为每个标签提供信息。我在每个标签内都有这样的按钮 -

                  <div class="total_price_list_ft">
                    <a href="#">Proceed to Activities <i class="fa fa-long-arrow-right"></i></a>
                  </div>
                   <div class="total_price_list_ft_rt">
                    <a href="#"> <i class="fa fa-long-arrow-left"></i> Back to Travel Data</a>
                  </div>

如何在按钮点击时实现标签更改功能？

请指导。

Answer 1

您可以使用jquery标签检查以下网址

http://jqueryui.com/tabs/

Answer 2

您可以使用onclick事件

href="javascript:void(0)" onclick = "$('#sky-tab2').click();

其中sky-tab1,2,3，..是id。

Answer 3

您可以添加Tabs from JQuery UI甚至考虑使用Bootstrap！

Bootstrap也支持标签。 Bootstrap Javacript

希望我帮助过。

Answer 4

您可以编写JQuery函数

  $('input[name=sky-tabs]).click(function{
   #Write the code specfic to the tab here
    });

单击按钮上的更改选项卡

4 个答案: