Question

我按javascript创建了一个标签控件，如下面的代码所示。它运行良好，但我想改变它，当我更改每个标签时，asp:HiddenField的值设置为标签ID，并基于asp:HiddenField，活动标签更改。
我需要这样才能从后面的代码中更改asp:HiddenField值，以便我可以从后面的代码激活选项卡。

<script>
    $(document).ready(function () {
        var activeTabIndex = -1;
        var tabNames = ["tab1", "tab2", "tab3"];        
        $(".tab-menu > li").click(function (e) {
            for (var i = 0; i < tabNames.length; i++) {
                if (e.target.id == tabNames[i]) {
                    activeTabIndex = i;
                } else {
                    $("#" + tabNames[i]).removeClass("active");
                    $("#" + tabNames[i] + "-tab").css("display", "none");
                }
            }
            $("#" + tabNames[activeTabIndex] + "-tab").fadeIn();
            $("#" + tabNames[activeTabIndex]).addClass("active");

            var htab = document.getElementById('<%= hfTab.ClientID %>');
            htab.value = activeTabIndex;
            return false;
        });
    });
</script>


<asp:HiddenField runat="server" ID="hfTab" Value="1"/>
<div id="tab-container">  
    <ul class="tab-menu">  
        <li id="tab1" class="active">Report</li>  
        <li id="tab2">Manager</li>  
        <li id="tab3">User</li>               
    </ul>  

    <div class="clear"></div>
    <div class="tab-top-border"></div>
    <div id="tab1-tab">test111111111111
    </div>
    <div id="tab2-tab">test 222222222222
    </div>
    <div id="tab3-tab">test 333333333333
    </div>
</div>

Answer 1

这是一个小hackey :)但它工作正常。它应该被重构。

$(document).ready(function () {
    var tabId = 'tab' + $('#hfTab').attr('value');

    setTab(tabId); // intial set

    function setTab(tabId) {
        var tabId = tabId,
            tab = $('#' + tabId + '-tab'),
            $allContainers = $('.tab'),
            $allTabs = $('.tab-menu li');

        $allContainers.hide();
        $allTabs.removeClass('active');
        $(this).addClass('active');
        tab.fadeIn();
        var id = $('#hfTab').attr('value');
        $('#hfTab').attr({
            value: id
        });
    }

    $(".tab-menu").on('click', 'li', function (e) {
        e.preventDefault();
        var tabId = e.target.id;
        setTab(tabId);
    });
});

<强> JSFIDDLE

如何从代码后面更改活动选项卡？

1 个答案: