How to specify which element to change background color jquery


Tags: jquery,html,css

Problem :

I have made a simple website where I have a slideshow.

The pictures slide is automatic and on the right side of the page I have a menu with 6 buttons. When I press "button1" the picture for "button1" appears, when I click on "button2" the picture for "button2" appears etc.

What I want to do:

When my slideshow changes that one of the 6 buttons gets their background color change to indicate that the picture that is being displayed has a relation to that button.

Example:

Slideshow:
picture1 appears -----> button1 gets background color changed
picture2 appears -----> button2 gets background changed 
etc.

My code for this:

$(".showcase-thumbnail-content").removeClass("active, passive"); 
$(".showcase-thumbnail-content").addClass("active"); 

This works with the problem that all the buttons get their color changed not just one at the time.

All buttons are in the div with class showcase-thumbnail-content I have thought about creating a separate div for each button but my main question is:

How do make it so that only "button1" gets the background color changed when "picture1" is displayed on the slideshow??

I have tried being as through as I can, if more info is needed just ask.

Edit:

Since there is alot of code on the page i don´t exaactly know what parts would be most relevant here so if any1 would take the time and look here:

http://showcase.awkwardgroup.com/index2.html

I am working with demo 2, with my own modifications.

The following changes have been done:

css:

.showcase-thumbnail-content {
    /* padding: 10px;
    text-align: center;
    padding-top: 25px; */

    background: #ededed;
    padding: 5px 15px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    color: #777;
    text-decoration: none;
    font: bold 0.8em arial, sans-serif;
    width: 120px;
    font-size: 130%;
    cursor: hand;
    cursor: pointer;
}
            }
.showcase-thumbnail-content:hover {
    color:#F77B0F!Important;
}

.active {
    background: red;
}

html changes:

showcase-slide:

<div class="showcase-slide">
            <!-- Put the slide content in a div with the class .showcase-content. -->
            <div class="showcase-content">
                <img src="images/01.jpg" alt="01" />
            </div>
            <!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
            <div class="showcase-thumbnail">
                <!-- <img src="images/01.jpg" alt="01" width="140px" /> -->
                <!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. -->
                <p class="showcase-thumbnail-content">First</p>
                <!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
                <!-- <div class="showcase-thumbnail-cover"></div> -->
            </div>
            <!-- Put the caption content in a div with the class .showcase-caption -->
            <div class="showcase-caption">
                <h2>Be creative. Get Noticed!</h2>
            </div>
        </div> 

// This is done for all the six elements(exactly the same)

The script code is the same as in demo2 with the modification that i have shown above.

If more info is needed just ask.



Solution :

With the help from a friend i solved this.

It would seem that i had missed some code in the demo.

the following script was in it:

if (options.thumbnails)
                    {
                        i = 0;
                        showcase.find('.showcase-thumbnail').each(function()
                        {
                            var object = jQuery(this);
                            object.removeClass('active');
                            if (i === current_id) { object.addClass('active'); }
                            i++;
                        });
                    }

And in the css I had :

showcase-thumbnail.active p
        {
            color: blue;

        }

Hope this will help others in the future!


    CSS Howto..

    How to set a minimum content size of a webpage in html, css? [closed]

    how to bold words within a paragraph in HTML/CSS?

    How to use jquery .css in a javascript variable

    How to find the css, color codes and other coding a site uses

    CSS HTML how to ignore some css for non ie7 or ie8

    How to remove a specific (bottom) border from p:row in p:panelGrid?

    How to color every second row using jQuery when the number of element in a row is variable?

    Captions not showing correctly when using Anything Slider

    How to assign a unique CSS id to each cell in a jqGrid?

    Switching styles (Class) on a function that show and hide a div tag content

    How to make pop up div locked to the page coordinates in jQuery

    How to interchange table cells using Pure CSS

    How can you print a page that has been altered by javascript?

    How do I make a dropdown extend to the left?

    How to resize in
    with float:left?

    How to fit number within defined div in css

    How to do CSS attribute selector with title~= that has to contain a space?

    How to draw heart using HTML/CSS table?

    In GWT, how to reference an external (obfuscated) CSS in another CSS file

    How to make background images clickable (javascript or css)

    how to toggle image in HTML-CSS? [duplicate]

    How to extend background CSS styling indefinitely along the x-axis?

    How can I convince Firefox to redraw CSS Pseudo-elements?

    ASP.NET - how to use CSS to align ASP.NET controls in a data entry situtaion?

    How to give css when span tag within double quotes

    How to generate the following control using html and css

    How to centre my CSS menu?

    How to pull out CSS attributes from inline styles with BeautifulSoup

    How to create such (see image below) effect using pure HTML JS and CSS?

    How do I achieve this particular hover effect?