CODEWITHSUNDEEP
jquery
user2071500
user2071500

Reputation: 1

Jquery if statement for different classed buttons

I have 5 buttons all with different classes (fancy images for each), I want to be able turn the particular active class on when the button is clicked and off when another is clicked. ` --HTML for buttons--

 <ul>
 <li class="home">
  <a href="#home" class="buttonhome">HOME</a>
 </li>

 <li class="about">
   <a href="#about" class="buttonabout">ABOUT US</a>
 </li>

 <li class="otres">
 <a href="#otres" class="buttonotres">OTRES BEACH</a>
 </li>

 <li class="rates">
   <a href="#rates" class="buttonrates">FACILITIES <br /> & RATES</a>
 </li>

 <li class="contact">
  <a href="#contact" class="buttoncontact">CONTACT US</a>
 </li>
 </ul>

`

I can manage to get jQuery to switch the classes for one button, but am stuck either getting it into an if statement or better. 

 --Jquery--

<script type="text/javascript">
    $(".buttonhome").click( function() {
        $(".activehome").removeClass("activehome");
        $(this).parent("li").addClass("activehome");
    });
</script>

Upvotes: 0

Views: 69

Answers (4)

Anton
Anton

Reputation: 32581

This will add the class "activehome","activeabout","activeotres","activerates","activecontact" on the li depending on what button you click and remove if another button is clicked.

$('ul li').find('a').on('click', function () {
        $('ul li').find('a').each(function () {
            $(this).parent().removeClass('active' + $(this).attr('href').replace("#", ""));
        });
        $(this).parent().addClass('active' + $(this).attr('href').replace("#", ""));
    });

Upvotes: 0

mhan
mhan

Reputation: 373

You could implement something like the logic below;

("button").click(function(){

//get the button id or class

// use the above id or class in an if statement and do what you like to do

});

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

$('ul > li > a').click(function() {
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
})

As your links already have IDs there wouldn't be a reason to use unique active classes as well, as you could simply style using:

#home.active { ... }
#about.active { ... }
etc.

Upvotes: 0

Kristof Claes
Kristof Claes

Reputation: 10941

I would give your <ul> a class or an ID and just give all <li>'s the same active class.

 <ul id="menu">
 <li class="home">
  <a href="#home" class="buttonhome">HOME</a>
 </li>

 <li class="about">
   <a href="#about" class="buttonabout">ABOUT US</a>
 </li>

 <li class="otres">
 <a href="#otres" class="buttonotres">OTRES BEACH</a>
 </li>

 <li class="rates">
   <a href="#rates" class="buttonrates">FACILITIES <br /> & RATES</a>
 </li>

 <li class="contact">
  <a href="#contact" class="buttoncontact">CONTACT US</a>
 </li>
 </ul>

The JavaScript:

<script type="text/javascript">
    $("ul#menu li a").on('click', function() {
        $("ul#menu li.active").removeClass("active");
        $(this).parent("li").addClass("active");
    });
</script>

The CSS:

li.home { background-image: url(image1.jpg); }
li.home.active { background-image: url(image2.jpg); }

Upvotes: 1

Related Questions