根据单击的链接在4个CSS类之间切换

Question

编辑：我把一个草率的jsfiddle与更多的代码放在一起： http : //jsfiddle.net/3guy01a2/可能有助于显示我要在这里做什么

我已经在SO和网络上查看了许多答案，但无法使toggleClass，switchClass，remove / addClass等起作用。 真的，我不确定100％会是完成这项工作的最佳工具。

我在页面的页脚有4个链接，我希望根据单击的链接来更改背景。 所有这四个都更改为不同颜色的渐变集。 我需要为每个链接类使用jQuery click函数，还是可以在一个函数中完成？

我遇到的一切都是为了切换两个类，所以我首先尝试了。 目前，我正在尝试使用该默认设置和“ about”页面来工作，该页面无法执行任何操作。 任何原因都不起作用？ 更改发生在具有“容器” ID的div上。

$("#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+ */
}

任何帮助都会很棒。 谢谢！

Answer 1

这里有很多错误。 首先，您应该在#about上调用click事件处理程序， #about其放置在about链接上。

其次，在toggleVisibility('about')的about链接上有一个onclick处理程序，我认为它不是有效的函数，除非您在代码的其他位置定义了该处理程序，并且未在此处将其包括在内。

第三，您已经向容器元素添加了defaultbgclass ，所以我不确定为什么要在其子元素之一上切换这些类，因为#about的背景将设置在容器背景上。

无论如何，简短的答案是：

$("#footer_link").click(function()
{
    $('#about').toggleClass("defaultBgClass aboutBgClass");
});

更新：

根据更新的要求，您需要三件事。 首先，删除display:none; 在#about div。 其次，删除页脚链接的onclick处理程序。 第三，JavaScript应该是：

$("#footer_link").click(function(){
    $('#container').toggleClass("defaultBgClass aboutBgClass");
});

但是，如果要在多个容器类之间切换，则toggleClass将不起作用。

Answer 2

也许您可以执行以下操作：

$(".footer a").on("click", function () {
    var idOfTheClickedLink = $(this).attr("id");
    $("#container").attr("class", idOfTheClickedLink);
});

为链接指定一个ID，并使用具有相同名称的类设置容器的背景色。 这是一个有效的小提琴： http : //jsfiddle.net/theagitator/1hcv3qtm/3/

编辑：您的小提琴有多个问题：

您必须了解，您不能在同一HTML页面上多次使用相同的ID
在小提琴中，如果使用jQuery，则必须导入jQuery
您可以在一次单击事件中完成所有您想做的事情
你有很多不必要的代码

这是我更新后的代码：

// 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/

Answer 3

我只是以您的例子为小提琴，唯一的调整是更改

$("#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当前类，并添加特定的类。 小提琴与footerBgClass和调整代码的额外的CSS：

$("#about").click(function () {
  $("#container").attr("class", "").addClass("aboutBgClass");
});
$(".footer").click(function () {
  $("#container").attr("class", "").addClass("footerBgClass");
});

Answer 4

有效的JSFIDDLE： http : //jsfiddle.net/fixit/L4ncba28/还添加了“ home”链接，以获取默认的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+ */
}

Answer 5

我自己的问题（简化）如下：

// 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';
        });
    });
});

JS小提琴演示。

显然，在演示中，我为背景使用了简单的颜色，但是该方法对于任何渐变或图像也一样适用，您可能不介意命名，因为它只处理类名。

参考文献：

JavaScript：
- JavaScript正则表达式。
- String.prototype.replace() 。
- String.prototype.toLowerCase() 。
- String.prototype.trim() 。
jQuery的：
- on() 。
- prop() 。

根据单击的链接在4个CSS类之间切换

问题描述

5 个解决方案

解决方案1
1 2014-11-08 23:09:02

更新：

解决方案2
1 已采纳 2014-11-08 23:42:31

解决方案3
0 2014-11-08 23:06:02

解决方案4
0 2014-11-08 23:17:25

解决方案5
0 2014-11-08 23:38:38

根据单击的链接在4个CSS类之间切换

问题描述

5 个解决方案

解决方案1 1 2014-11-08 23:09:02

更新：

解决方案2 1 已采纳 2014-11-08 23:42:31

解决方案3 0 2014-11-08 23:06:02

解决方案4 0 2014-11-08 23:17:25

解决方案5 0 2014-11-08 23:38:38

解决方案1
1 2014-11-08 23:09:02

解决方案2
1 已采纳 2014-11-08 23:42:31

解决方案3
0 2014-11-08 23:06:02

解决方案4
0 2014-11-08 23:17:25

解决方案5
0 2014-11-08 23:38:38