回发时,jQuery Tab无法保留活动选项卡

时间:2014-01-21 06:55:10

标签: jquery

我有一个jQuery选项卡。在第3个选项卡中单击og按钮时,选项卡将控件移动到第一个选项卡。我尝试了很多方法,比如asp隐藏字段和存储当前选项卡它不起作用

  <div id="tabwrap">
     <ul id="tabs">
      <li><a href="#tabs-1" class="current">Attribute Based Control</a></li>
      <li><a href="#tabs-2">Role Based Control</a></li>
      <li id="tab3"><a href="#tabs-3">Users</a></li>
       </ul>
  <div id="content">
                            <div id="tabs-1" class="tab-section">
</div>
  <div id="tabs-2" class="tab-section">
</div>
  <div id="tabs-3" class="tab-section">
<asp:Button ID="btnSearch" runat="server" Text="Submit" CssClass="buttonsmallRight" Visible="false" ClientIDMode="Static" />
</div>
</div>

选项卡的jQuery

  $(function () {
            $('.tab-section').hide();
            $('#tabs a').bind('click', function (e) {
                $('#tabs a.current').removeClass('current');
                $('.tab-section:visible').hide();
                $(this.hash).show();
                $(this).addClass('current');
                e.preventDefault();
            }).filter(':first').click();

    });

jQuery的CSS

#tabs {
    margin: 0;
    overflow: hidden;
    padding: 0;
    zoom: 1;
    position: relative;
    top: 2px;
    z-index: 1;
    margin-left: -500px;
}

    #tabs li {
        display: block;
        list-style: none;
        margin: 0;
        margin-right: 1px;
        padding: 0;
        float: left;
        text-align: center;
    }

        #tabs li a {
            display: block;
            padding: 2px 10px;
            border: 2px solid #808080;
            border-bottom: 0 none;
            text-align: center;
            text-decoration: none;
            border-bottom: 1px gray;
            /*background-color: #d4efff;*/
            background-color: #d6d7e4;
            height: 22px;
            font-size: 16px;
            width: 150px;
        }

#tab-section {
    background: #A59CFF;
    padding: 10px;
    border: 2px solid #6161f3;
    margin-left: -700px;
    width: 926px;
}

#tabs li a.current {
    background: #A59CFF;
    color: white;
    border-bottom: 2px solid #A59CFF;
    height: 22px;
    font-size: 16px;
    text-align: center;
}

2 个答案:

答案 0 :(得分:0)

function formLoad(){//在这里执行操作}  而不是$(function(){//在这里执行动作});

答案 1 :(得分:0)

我已经解决了这个问题。我有一个更新面板,只要页面加载就会触发。这是为了在回发后保留jquery函数。该脚本有一个jquery选项卡脚本,每次作为回发时都会触发。 jquery选项卡部分已从更新面板脚本中删除,该脚本解决了错误:)

干杯, Kannappan