JQuery Slider;如何更改按钮名称？ （例如;'打开'，'关闭'）

Question

实时查看： https://tornhq.com/WorkingOn/InteractiveMap/Replaced-With-Divs.html

---

要滑动的JQuery代码＆amp;标签切换器

$(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将更改为另一个图像（尚未创建任何iamge），并且“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();
    });
});

修改

李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;
}

Answer 1

在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，使一切看起来都很漂亮。