0

Live View: https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html

JQuery Code to Slide & Tab Switcher

$(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 of the Show/Hide

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

I would like that when you click to hide the side container, the image rel changes to another image (none of the iamge have been made yet) and for the name of 'Hide This' to become 'Show This'. I would also like the JQuery Tab Switcher I have to not show an empty contain, instead to do the same as what it does, changing the class to current, however keeping the content of the tab you were on, and then if you decide to reopen the current switches back.

Thank you for any time spend in answering my questions.

Best Regards,

Tim

Edit:

$(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();
    });
});

Edit:

The 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

In your toggle() access the link and go from there:

$(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();
    });
});

In order to fix that, throw this in your CSS file:

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

And I updated the JavaScript one last time that uses a callback function on the animation to make everything look pretty.

于 2013-03-31T01:08:53.523 回答