Javascript 根据单击的链接在4个css类之间切换_Javascript_Jquery_Html_Css

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

javascript jquery html css

Javascript 根据单击的链接在4个css类之间切换,javascript,jquery,html,css,Javascript,Jquery,Html,Css,编辑：我匆忙编写了一个JSFIDLE，其中包含了更多的代码：可能有助于说明我在这里要做什么我已经在SO和web上查看了许多答案，但无法切换类、切换类、删除/添加类等。真的，我不能百分之百确定哪一个工具最适合这份工作我在一个页面的页脚有4个链接，我希望根据单击的链接更改背景。所有4个渐变都会更改为不同颜色的渐变集。我需要为每个链接类使用jQuery click函数，还是可以在一个函数中完成我遇到的一切都是为了换两门课，所以我先试了一下。目前，我正在尝试使用此工具使默认页面和“about”页面

编辑：我匆忙编写了一个JSFIDLE，其中包含了更多的代码：可能有助于说明我在这里要做什么

我已经在SO和web上查看了许多答案，但无法切换类、切换类、删除/添加类等。真的，我不能百分之百确定哪一个工具最适合这份工作

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

我遇到的一切都是为了换两门课，所以我先试了一下。目前，我正在尝试使用此工具使默认页面和“about”页面正常工作，但没有任何效果。有什么原因不起作用吗？更改发生在id为“container”的div上

基本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>

任何帮助都会很好。谢谢

我刚刚对你的例子做了一个调整，唯一的调整就是改变

$("#about").click(function(){..

进入

$("#container").click(function(){...

由于

关于设置为显示：无，单击事件将不起作用
更新下面的评论，OP提供了关于需求的更多信息-如果带有id=“about”
的div不应设置为显示：无
但是应该是可点击的，并切换#容器的类
$("#about").click(function()
{
  $("#container").toggleClass("defaultBgClass aboutBgClass");
});

因为有点不清楚第二次单击#about
是否应该将分配给#容器的类切换回默认值，或者如果每次单击一个部分都应该切换到一个特定的类-在这种情况下，最好将当前类从#container
中删除并添加特定的类。使用footerBgClass的附加css和调整后的代码：
$("#about").click(function () {
  $("#container").attr("class", "").addClass("aboutBgClass");
});
$(".footer").click(function () {
  $("#container").attr("class", "").addClass("footerBgClass");
});

这里有很多错误。首先，您正在调用#about
上的click事件处理程序，此时它应该放在about链接上
其次，在toggleVisibility（'about'）
的about链接上有一个onclick
处理程序，我认为它不是一个有效的函数，除非您在代码的其他地方定义了它，并且没有包含在这里
第三，您已经向container元素添加了defaultbgclass
，因此我不确定您为什么要在其子元素之一上切换这些类，因为#about
的背景将设置在container背景之上
总之，简单的答案是：
$("#footer_link").click(function()
{
    $('#about').toggleClass("defaultBgClass aboutBgClass");
});

更新：
根据更新的需求，您需要三件事。首先，移除显示：无#about
div上选择code>。其次，删除页脚链接的onclick
处理程序。第三，javascript应该是：
$("#footer_link").click(function(){
    $('#container').toggleClass("defaultBgClass aboutBgClass");
});

但是，如果要在多个容器类之间切换，toggleClass
将不起作用。正在工作的JSFIDLE：
还添加了“home”链接以访问默认的bakcground
HTML
CSS（相同）
我自己对你的问题的简单看法如下：
// 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';
        });
    });
});

//为单击绑定事件处理程序
显然，在演示中，我使用了简单的颜色作为背景，但是这种方法同样适用于任何渐变或图像，您可能需要命名，因为它只处理类名
参考资料：

JavaScript:






jQuery：




也许你可以这样做：
$(".footer a").on("click", function () {
    var idOfTheClickedLink = $(this).attr("id");
    $("#container").attr("class", idOfTheClickedLink);
});

为链接指定一个id，并使用一个同名的类来设置容器的背景色。这是一把小提琴：
编辑：
您的小提琴有多个问题：

你必须明白，你不能在同一个HTML页面上使用多个相同的id
在Fiddle中，如果使用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();
});

我帮你处理了这个代码，去掉了onclick，还解决了其他问题：
所以#容器
应该根据单击页脚中的链接将其类更改为
？单击id=about
的元素应该分配aboutBgClass
？是的，这正是我想要做的。共有4个类，about、projects、photos和contact，应根据单击的链接切换到相应的类您没有定义toggleVisibility
@LightnessRacesinOrbit我对JSFIDLE不是100%熟悉，但它在我的机器上工作：/toggleVisibility fn包含完整的代码，根据你的更新：每个标题有4个容器类可供切换。因此，这确实回答了一个问题，即toggleClass对于工作来说是错误的工具。我需要一个可以用于两个以上班级的解决方案谢谢你的反馈，我觉得我犯了一大堆愚蠢的错误。这是我8年来创建的第一个网站，所以在忘记新事物和新事物之间，我基本上从未做过这样的事情。让我编辑我的主要项目，看看这一切是如何进行的。而且我甚至没有意识到我使用了相同的id来表示“s”和“s”，直到你说，这太糟糕了，哈哈！有趣的是，它只在JS位于文档的最末尾时才起作用，在之前。我想知道我以前有多少次尝试失败了，因为我把所有的JS都放在了最上面。。。哦，好的，谢谢你！不客气。也许你可以利用一些学习来刷新你的记忆，学习一些新的东西。网络上到处都是这样做的网站，例如，在那里你可以学习HTML、JavaScript和jQuery。是的，这正是这个项目的目的，阅读材料，让它工作（阅读：break），然后在网站上有一些有用的东西
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");
});

.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+ */
}

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

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

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