JQuery滑块；如何更改按钮名称？（例如，打开和关闭）

实时查看：

---

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的显示/隐藏

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

编辑：

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

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

Li CSS:

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

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

在

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，它在动画中使用回调函数使一切看起来都很漂亮。

太棒了！我还没有制作任何图像进行测试，但是这会改变你所做的rel吗$（this.find（'a'）.rel（'open.png'）；。您是否有任何建议仅针对此选项卡删除选项卡开关？一旦您到达链接，

$（this）。查找（'a'）

，只需像其他jQuery对象一样操作它。我对jQuery非常陌生，我一直在寻找代码片段，由于以前在MSL编程语言中制作mIRC机器人的经验，我很高兴能像我在HTML/CSS和MSL中做的那样来学习它。要编辑

li

元素的

rel

？检查我的答案是否有更新。实际上我错了，请检查我的编辑是否有更新。我想是因为某种原因rel拍摄了这些照片，我不知道为什么我会这样想，我想是时候。。。实时版本也已更新。