0

ライブ ビュー: https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html

スライド & タブ スイッチャーへの JQuery コード

$(function () {
    $("#tab-3").toggle(function () {
        $('#Map-Selection-Info').animate({marginLeft: '978px'}, 1000);
        $('#ATWI80C-Map').animate({width: '900px' }, 1000);
    }, function () {
        $('#Map-Selection-Info').animate({marginLeft:'670px'}, 1000);
        $('#ATWI80C-Map').animate({width: '600px' }, 1000);
    });
    $('#tab-content div').hide();
    $('#tab-content div.tab-content').last().fadeIn().find('*').show();

    $('#Info-Side-Tabs li').click(function() {
        $('#Info-Side-Tabs li').removeClass("current");
        $(this).addClass("current");
        $('#tab-content div').hide();
        var href = $(this).find('a').attr("href");
        $('#tab-content div' + href).fadeIn().find('*').show();
    });
});

表示/非表示の李

<li rel="redeye16.png" id="tab-3"> <a href="#">Hide This</a> </li>

クリックしてサイド コンテナを非表示にすると、イメージ rel が別のイメージに変わり (イメージはまだ作成されていません)、「Hide This」の名前が「Show This」になるようにしてください。また、JQuery Tab Switcher を使用して、空の内容を表示しないでください。代わりに、クラスを現在のクラスに変更し、現在のタブの内容を保持します。現在のスイッチを再度開きます。

私の質問に答えてくれてありがとう。

よろしくお願いします、

ティム

編集：

$(function () {
    $("#tab-3").toggle(function () {
        $('#Map-Selection-Info').animate({marginLeft: '978px'}, 1000);
        $('#ATWI80C-Map').animate({width: '900px' }, 1000);
        $(this).find('a').text('Open Me');
        // Problem is Below
        $(this).css("background-image","url(http://www.theaa.com/images/insurance/tick-trans.gif) no-repet");
    }, function () {
        $('#Map-Selection-Info').animate({marginLeft:'670px'}, 1000);
        $('#ATWI80C-Map').animate({width: '600px' }, 1000);
        $(this).find('a').text('Close Me');
        // Problem is Below
        $(this).css("background-image","url(http://www.ecvet-projects.eu/Admin/images/icons/Red_X.gif) no-repet");
    });
    $('#tab-content div').hide();
    $('#tab-content div.tab-content').last().fadeIn().find('*').show();

    $('#Info-Side-Tabs li').click(function() {
        $('#Info-Side-Tabs li').removeClass("current");
        $(this).addClass("current");
        $('#tab-content div').hide();
        var href = $(this).find('a').attr("href");
        $('#tab-content div' + href).fadeIn().find('*').show();
    });
});

編集：

Li CSS:

.tab-list li a {
    display: block;
    float: left;
    line-height: 25px;
    padding-left: 30px;
    font-family: sans-serif;
    font-size: 13px;
    background-image: url(http://www.ecvet-projects.eu/Admin/images/icons/Red_X.gif);
    background-repeat: no-repeat;
    background-position: 12px center;
    color: #444;
    text-decoration: none;
}
4

1 に答える 1

0

toggle()リンクにアクセスして、そこから移動します。

$(function(){
    var mapsInfo = $("#Map-Selection-Info"), atwMap = $("#ATWI80C-Map"), tabContent = $("#tab-content div");
    $("#tab-3").toggle(function(){
        mapsInfo.animate({marginLeft: "978px"}, 1000, function(){
            $(this).css("background-image", "url(http://www.theaa.com/images/insurance/tick-trans.gif)").find("a").text("Open Me");
        });
        atwMap.animate({width: "900px"}, 1000);
    }, function(){
        mapsInfo.animate({marginLeft: "670px"}, 1000, function(){
            $(this).css("background-image", "url(http://www.ecvet-projects.eu/Admin/images/icons/Red_X.gif)").find("a").text("Close Me");
        });
        atwMap.animate({width: "600px"}, 1000);
    });
    tabContent.hide();
    $("#tab-content div.tab-content").first().fadeIn().find('*').show();
    $("#Info-Side-Tabs li").on("click", function(){
        var href = $(this).find("a").attr("href");
        $("#Info-Side-Tabs li").removeClass("current");
        $(this).addClass("current");
        tabContent.hide();
        $("#tab-content div" + href).fadeIn().find("*").show();
    });
});

これを修正するには、これを CSS ファイルに挿入します。

#tabs-3 {
    /* other styling... */
    background-repeat: no-repeat;
    background-position: 15% 10%;
}

最後に、アニメーションでコールバック関数を使用してすべてをきれいに見せる JavaScript を更新しました。

于 2013-03-31T01:08:53.523 に答える