Question

到目前为止，我已编码将标签的display属性设置为none，直到单击该按钮为止。代码如下。

问题是一次只显示一个标签。我想要的是，所有标签应该是可见的但不可点击。请尽可能帮我编写代码，或者只是给我一些建议，我会自己编写代码并将其作为答案发布在此处。

谢谢！

在

<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
    </ul>

In（只有第一个选项卡可见，其他选项卡不可见）

<script type="text/javascript">
$(document).ready(function(){

    /*initially hide all tab except tab1*/
    $('.TabbedPanelsTabGroup').children().hide().eq(0).show();

    /*show tab2 when click the complete button by hiding all tabs*/
    $('.complete').on('click', function(){
         $('#tab2').siblings().slideUp();
        $('#tab2').slideDown();
    });
});
</script>

在JS中:(按钮点击）（使用此按钮将显示第二个选项卡，其余3个选项卡将不可见）

TabbedPanels1.showPanel(1);

$('.TabbedPanelsTabGroup').children().hide().eq(1).show();

Answer 1

试试这个

$('.TabbedPanelsTabGroup').off("click");

或

$('.TabbedPanelsTabGroup li').off("click");

jQuery off()

如果不起作用，请告诉我。

更新1

$('.TabbedPanelsTabGroup li').on("click", function(){
   return false;
});

或者，如果您使用的是jquery选项卡，请查看：http://jqueryui.com/demos/tabs/#event-select

Answer 2

使用此

 $('.TabbedPanelsTabGroup').children().unbind("click");

 $('.TabbedPanelsTabGroup').children().eq(0).bind("click");

而不是

$('.TabbedPanelsTabGroup').children().hide().eq(0).show();

Answer 3

感谢所有的帮助，我终于找到了答案。它实际上非常简单。我刚刚在.js文件中评论了Spry.Widget.TabbedPanels.prototype.onTabClick事件。

/*Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
    this.showPanel(tab);
return this.cancelEvent(e);
};*/

现在标签不可点击，按我想要的方式工作。

如何在spry选项卡式面板中禁用选项卡单击？

3 个答案: