完整回发后缺少jQuery tabbedContent的当前TabIndex [英] Missing Current TabIndex of jQuery tabbedContent after Full PostBack

问题描述

我正在使用jQuery tabbedContent.但是，在完全回发之后，仅选择了第一个选项卡(即，当前的tabindex丢失了.).我使用了jquery.min.js(* jQuery JavaScript Library v1.3.2)，tabbedContent.js和tabbedContent.css.我该怎么写?拜托！

//这是tabbedContent.js

I am using jQuery tabbedContent.But, after full postback, only first tab is selected(i.e., current tabindex is missing.).I used jquery.min.js(* jQuery JavaScript Library v1.3.2), tabbedContent.js and tabbedContent.css. How do I write it? Please!

//This is tabbedContent.js

var TabbedContent = {
    init: function() {
        $(".tab_item").mouseover(function() {

            var background = $(this).parent().find(".moving_bg");

            $(background).stop().animate({
                left: $(this).position()['left']
            }, {
                duration: 300
            });

            TabbedContent.slideContent($(this));

        });
    },

    slideContent: function(obj) {

        var margin = $(obj).parent().parent().find(".slide_content").width();
        margin = margin * ($(obj).prevAll().size() - 1);
        margin = margin * -1;

        $(obj).parent().parent().find(".tabslider").stop().animate({
            marginLeft: margin + "px"
        }, {
            duration: 300
        });
    }
}

$(document).ready(function() {
    TabbedContent.init();
});

//这是tabbedContent.css

//And this is tabbedContent.css

.tabbed_content {
    background-color: #000000;
    width: 620px;
}

.tabs {
    height: 62px;
    position: relative;
}

.tabs .moving_bg {
    padding: 15px;
    background-color: LightSkyBlue;
    background-image:url(../images/arrow_down_green.gif);
    position: absolute;
    width: 125px;
    z-index: 190;
    left: 0;
    padding-bottom: 29px;
    background-position: bottom left;
    background-repeat: no-repeat;
}

.tabs .tab_item {
    display: block;
    float: left;
    padding: 15px;
    width: 125px;
    color: #ffffff;
    text-align: center;
    z-index: 200;
    position: relative;
    cursor: pointer;
    font-size:small;
}

.tabbed_content .slide_content {
    overflow: hidden;
    background-color: #000000;
    padding: 20px 0 20px 20px;
    position: relative;
    width: 600px;
}

.tabslider {
    width: 5000px;
}

.tabslider ul {
    float: left;
    width: 560px;
    margin: 0px;
    padding: 0px;
    margin-right: 40px;
}

.tabslider ul a {
    color: #ffffff;
    text-decoration: none;
}

.tabslider ul a:hover {
    color: #aaaaaa;
}

.tabslider ul li {
    padding-bottom: 7px;
}

//这是.aspx代码

//And this is .aspx code

<div class="tabbed_content">
                                    <div class='tabs'>
                                        <div class='moving_bg'>
                                            &nbsp;
                                        </div>
                                        <span class='tab_item'>Tab1</span><span class='tab_item'>Tab2</span>
                                        <span class='tab_item'>Tab3</span><span class='tab_item'>Tab4</span>
                                    </div>
                                    <div class='slide_content'>
                                        <div class='tabslider' align="left">
                                            <ul>
                                                <li>
                This is for Tab1.
            </li>
                                            </ul>
                                           <ul>
                                                <li>
                This is for Tab2.
            </li>
                                            </ul>
            <ul>
                                                <li>
                This is for Tab3.
            </li>
                                            </ul>
            <ul>
                                                <li>
                This is for Tab4.
            </li>
                                            </ul>
            </div>
                                    </div>
                                </div>

推荐答案

(" span>).mouseover(function(){ var 背景=

(".tab_item").mouseover(function() { var background =

( this ).parent(). find(" );

(this).parent().find(".moving_bg");

(背景) .stop().animate({ 左:

(background).stop().animate({ left:

这篇关于完整回发后缺少jQuery tabbedContent的当前TabIndex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！