编辑：我把一个仓促的jsfiddle与更多的代码组合在一起：http://jsfiddle.net/3guy01a2/可以帮助展示我在这里的目标
我已经在SO和网站上查看了许多答案，无法使用toggleClass，switchClass，remove / addClass等工作。真的，我不是100％肯定哪个是最好的工具。
我在页面的页脚有4个链接，我希望根据点击的链接更改背景。所有4都变为不同颜色的渐变集。我是否需要为每个链接类使用jQuery单击函数，还是可以在一个函数中完成？
我遇到的所有事情都是为了换班，所以我先尝试了。目前，我正试图获取默认值，并且＆＃34;关于＆＃34;要使用此工作的页面，它无法执行任何操作。有什么理由不起作用吗？更改发生在div与＃34;容器＆＃34;标识。
$("#about").click(function()
{
$(this).toggleClass("defaultBgClass aboutBgClass");
});
基本HTML是这样的：
<body>
<div id="container" class="defaultBgClass">
<div id="home" class="infobox" style="display:block";>
<h1>hello</h1>
<p>
This is sample text
</p>
</div>
<br />
<div id="about" class="infobox" style="display: none;">
<h1>about me</h1>
<p>
about me<br />
</p>
</div>
<br />
<div class="footer">
<a onclick="toggleVisiblility('about');" title="about" class="about" href="#" id="footer_link">
about
</a>
</div>
</div>
</body>
和css课程：
.defaultBgClass
{
background: -moz-radial-gradient(center, circle, #5c5c5c 0%, #444 100%); /* FF3.6+ */
background: -webkit-radial-gradient(center, circle, #5c5c5c 0%,#444 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, circle, #5c5c5c 0%,#444 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, circle, #5c5c5c 0%,#444 100%); /* IE10+ */
}
.aboutBgClass
{
background: -moz-radial-gradient(center, circle, #01a701 0%, #0c0 100%); /* FF3.6+ */
background: -webkit-radial-gradient(center, circle, #01a701 0%,#0c0 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, circle, #01a701 0%,#0c0 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, circle, #01a701 0%,#0c0 100%); /* IE10+ */
}
任何帮助都会很棒。谢谢！
答案 0 :(得分：1)
这里有很多错误。首先，您应该在#about上调用click事件处理程序，它应该放在about链接上。
其次，你在onclick的about链接上有一个toggleVisibility('about')处理程序，我认为它不是一个有效的函数，除非你在代码的其他地方定义它并且没有包括在这里。
第三，你已经将defaultbgclass添加到容器元素中，所以我不确定你为什么要在其中一个子元素上切换这些类，因为#about的背景将设置在容器背景上。
无论如何，简短的回答是：
$("#footer_link").click(function()
{
$('#about').toggleClass("defaultBgClass aboutBgClass");
});
根据更新的要求，您需要三件事。首先，删除display:none; div上的#about。其次，删除页脚链接的onclick处理程序。第三，javascript应该是：
$("#footer_link").click(function(){
$('#container').toggleClass("defaultBgClass aboutBgClass");
});
但是，如果您要在多个容器类之间切换，toggleClass将无效。
答案 1 :(得分：1)
也许你可以这样做：
$(".footer a").on("click", function () {
var idOfTheClickedLink = $(this).attr("id");
$("#container").attr("class", idOfTheClickedLink);
});
为链接指定ID并使用具有相同名称的类来设置容器的背景颜色。这是一个工作小提琴：http://jsfiddle.net/theagitator/1hcv3qtm/3/
修改 你的小提琴有很多问题：
这是我使用切换的更新代码：
// changes background and toggles the infoboxes
$(".footer a").on("click", function () {
var idOfTheClickedLink = $(this).attr("id");
$("#container").attr("class", idOfTheClickedLink);
// hide the visible infobox
$(".infobox:visible").hide();
// use the id of the clicked element to show the infobox
$("#" + idOfTheClickedLink + "Content").show();
});
我用这个代码分叉你的小提琴，摆脱了onClicks并修复了其他问题：http://jsfiddle.net/theagitator/dg79qa9p/3/
答案 2 :(得分：0)
我刚刚用你的例子做了Fiddle，唯一的调整是改变
$("#about").click(function(){..
进入
$("#container").click(function(){...
当about设置为display:none;时，点击事件将无效。
更新以获取OP下面的评论，提供有关要求的更多信息 - 如果id="about"的div不应设置为display:none;，但应该是可点击的切换#container的类，它将是
$("#about").click(function()
{
$("#container").toggleClass("defaultBgClass aboutBgClass");
});
有点不清楚是否第二次点击#about应该将分配给#container的类别切换回默认值，或者每次点击一个部分应该只切换到特定的类 - 在此最好从#container中删除当前类并添加特定类。 Fiddle为footerBgClass添加了额外的css并调整了代码：
$("#about").click(function () {
$("#container").attr("class", "").addClass("aboutBgClass");
});
$(".footer").click(function () {
$("#container").attr("class", "").addClass("footerBgClass");
});
答案 3 :(得分：0)
正在运行的JSFIDDLE：http://jsfiddle.net/fixit/L4ncba28/ 还添加了＃34; home＆＃34;链接到默认的bakcground
HTML
<div id="container" class="defaultBgClass">
<div id="home" class="infobox" style="display:block";>
<h1>hello</h1>
<p>
This is sample text
</p>
</div>
<br />
<div id="about" class="infobox" style="display: none;">
<h1>about me</h1>
<p>
about me<br />
</p>
</div>
<br />
<div class="footer">
<a title="home" class="home" href="#" id="footer_link_home">
home
</a>
<a title="a" class="about" href="#" id="footer_link_about">
about
</a>
</div>
</div>
JS
var container = $("#container");
$("#footer_link_about").click(function()
{
container.removeAttr("class");
$("#container").addClass("aboutBgClass");
});
$("#footer_link_home").click(function()
{
container.removeAttr("class");
$("#container").addClass("defaultBgClass");
});
CSS（相同）
.defaultBgClass
{
background: -moz-radial-gradient(center, circle, #5c5c5c 0%, #444 100%); /* FF3.6+ */
background: -webkit-radial-gradient(center, circle, #5c5c5c 0%,#444 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, circle, #5c5c5c 0%,#444 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, circle, #5c5c5c 0%,#444 100%); /* IE10+ */
}
.aboutBgClass
{
background: -moz-radial-gradient(center, circle, #01a701 0%, #0c0 100%); /* FF3.6+ */
background: -webkit-radial-gradient(center, circle, #01a701 0%,#0c0 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, circle, #01a701 0%,#0c0 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, circle, #01a701 0%,#0c0 100%); /* IE10+ */
}
答案 4 :(得分：0)
我自己的，简化的，接受你的问题如下：
// binding an event-handler for clicks on <a> elements inside the .footer:
$('.footer a').on('click', function () {
// finding the prefix to add (assuming the title accurately represents
// the prefix of the class to be added; trimming leading/trailing white-
// space, and converting it to lowerCase:
var toAdd = this.title.trim().toLowerCase();
// setting the 'className' property of the #container element:
$('#container').prop('className', function (i, cN) {
// i: the index of the current element amongst those returned by the selector,
// cN: the current value of the property we're updating.
// replacing a sequence of alpha-numeric characters followed by the literal
// string 'BgClass', preceded and followed by word-boundaries (\b):
return cN.replace(/\b(\w+)BgClass\b/, function (match) {
// returning the trimmed/lowercased title of the clicked element
// with the string 'BgClass' added:
return toAdd + 'BgClass';
});
});
});
显然，在演示中，我使用了简单的颜色作为背景，但是这种方法对于任何渐变或图像也同样适用，因为它只能操作类名。
参考文献：