CODEWITHSUNDEEP
javascriptjqueryhtmlcss
zakparks31191
zakparks31191

Reputation: 937

Switch between 4 css classes depending on the link clicked

Edit: I put together a hasty jsfiddle with a lot more of the code: http://jsfiddle.net/3guy01a2/ Might help show what I'm going for here

I've looked at many answers on SO and the web and cant get toggleClass, switchClass, remove/addClass, etc to work. Any really, I'm not 100% sure which would be the best tool for the job.

I have 4 links at the footer of a page, and I want the background to change based on which link is clicked. All 4 change to a different colored set of gradients. Would I need a jQuery click function for each link class, or can it be done in one function?

Everything I've come across is for switching two classes so I tried that first. Currently I'm trying to get the default and the "about" page to work using this, which fails to do anything. Any reason it doesn't work? The changes happen to the div with the "container" id.

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

The basic HTML is something like this:

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

And css classes:

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

Any help would be great. Thanks!

Upvotes: 0

Views: 439

Answers (5)

balzafin
balzafin

Reputation: 1426

Maybe you could do something like this: 

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

Give the link an id and use a class with the same name to set the background color of the container. Here's a working fiddle: http://jsfiddle.net/theagitator/1hcv3qtm/3/

EDIT: Your Fiddle had multiple problems:

  • you have to understand, that you can't use the same id on the same HTML page more than ones
  • in a Fiddle, you must import jQuery if you are using it
  • you can do all you wan't here within one on click event
  • you had a lot of unnecessary code

Here's my updated code with the toggling:

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

I forked your Fiddle with this code, got rid of the onClicks and also fixed the other problems: http://jsfiddle.net/theagitator/dg79qa9p/3/

Upvotes: 1

David Thomas
David Thomas

Reputation: 253396

My own, simplified, take on your problem would be the following:

// 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 Fiddle demo.

Obviously, in the demo, I've used simple colours for the background, but the approach will work just as well with any gradients, or images, you might care to name since it only manipulates the class names.

References:

Upvotes: 0

apkostka
apkostka

Reputation: 405

There are a number of things wrong here. First, you're calling the click event handler on #about, when it should be placed on the about link.

Second, you have an onclick handler on the about link of toggleVisibility('about'), which I don't believe is a valid function, unless you've defined it elsewhere in your code and haven't included it here.

Third, you've added defaultbgclass to the container element, so I'm not sure why you'd want to toggle those classes on one of its child elements, since the background for #about would be set over the container background.

Anyway, the short answer is:

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

Update:

Based on the updated requirements, there are three things you need. First, remove the display:none; on the #about div. Second, remove the onclick handler for the footer link. Third, the javascript should be:

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

However, if you're going to be switching between multiple container classes, toggleClass won't work.

Upvotes: 1

matthias_h
matthias_h

Reputation: 11416

I've just made a Fiddle with your example, the only adjustment was to change

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

into 

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

As about is set to display:none;, a click event won't work.

Update for the comment below OP providing more information on the requirement - in case the div with the id="about" shouldn't be set to display:none; but should be clickable and toggle the class of the #container, it would be

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

As it's a bit unclear if a second click on #about should switch the class assigned to the #container back to default or if each click on a section should just switch to a specific class - in this case it would be better to just remove the current class from #container and add the specific class. Fiddle with an additional css for footerBgClass and adjusted Code:

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

Upvotes: 0

Yonatan Ayalon
Yonatan Ayalon

Reputation: 2035

A working JSFIDDLE: http://jsfiddle.net/fixit/L4ncba28/ Also added "home" link to get to the default 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 (same)

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

Upvotes: 0

Related Questions