Geek asks and answers

Change div to class active only if necessary

I am trying to get each title / block table of my little carousel controls to turn blue when it is active and showing its contents. Right now they will switch between blue and black when pressed, this is pretty much simple to check, but overall there is someone who can change my javascript to control the active / inactive state of each button for this.

I left a live url to look so you can see some kind of code:

Live URL: http://bit.ly/1bijza0 (Homepage, next to the large image.)

HTML

<ul id="index-controls">
    <li><div id="1" class="active">FREE DISC Profile</div>
        <ul>
            <li><h2>Training that fits like a glove</h2></li>
            <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
        </ul>
    </li>
    <li><div id="2">Last Minute Availability</div>
        <ul>
            <li><h2>Training that fits like a glove</h2></li>
            <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
        </ul>
    </li>
    <li><div id="3">Bespoke Training</div>
        <ul>
            <li><h2>Training that fits like a glove</h2></li>
            <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
        </ul>
    </li>
</ul>

Javascript

jQuery('#1').click(function () {
    jQuery(this).toggleClass('active');
});
jQuery('#2').click(function () {
    jQuery(this).toggleClass('active');
});
jQuery('#3').click(function () {
    jQuery(this).toggleClass('active');
});

CSS

#index-controls div { display: block; background-color: #222424; font-weight: bold; margin: 0px; cursor: pointer; padding: 19px 20px 20px 20px; border-bottom: 1px solid #4e92ad; color: #fff; font-size: 1.1em; }
#index-controls .active { background-color: #4e92ad; }
#index-controls ul { padding-left: 0; margin-top: 0; }
#index-controls ul{ display: none; background-color: transparent; padding: 10px 10px 0px 10px; }
#index-controls ul li { list-style-type: none; background-color: transparent; width: 240px; color: #fff; font-size: 12px; }
+3
source share
4 answers

-, .

-, id jquery .

divs , class="same-class"

:

<div id="one" class="active same-class">FREE DISC Profile</div>

<div id="two" class="same-class">Last Minute Availability</div>

<div id="three" class="same-class">Bespoke Training</div>

jquery .

jQuery('.same-class').click(function(){
  jQuery('.same-class').removeClass('active');
  jQuery(this).addClass('active');
});

, class="same-class", active same-class, active , ,

, div, div .

EDIT: http://jsfiddle.net/az4c3/

+2

:

jQuery('#1,#2,#3').click(function(){
  jQuery('#1,#2,#3').removeClass('active');
  jQuery(this).addClass('active');
});

, , . , , . "-". , :

var $clickables = $('.clickable');
$clickables.click(function(){
  $clickables.removeClass('active');
  jQuery(this).addClass('active');
});

.clickable, - 4- 5- .

+1

Something like this should do the trick for you:

jQuery("#input-controls div").click(function() {
    jQuery("#input-controls div.active").add(this).toggleClass("active");
});
0
source

Here JSFiddle is very flexible:

http://jsfiddle.net/8VxLw/1/

var list = jQuery('#index-controls li div');
list.click(function() {
    list.removeClass('active');
    jQuery(this).addClass('active');
});
0
source

More articles:


All Articles