Trying to add class with jQuery

Question

Trying to add class to a section which increases font size of that section using jQuery addClass method but no working.

Here is the code..

html:

   <header>
    <ul>
         <li class="small"><a href="">Small</a></li>
         <li class="medium"><a href="">Medium</a></li>
         <li class="large"><a href="">Large</a></li>

    </ul>
 </header>

 <section id="data">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam 
     molestiae accusamus molestias reprehenderit autem harum tenetur! 
      Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio 
     possimus nostrum, ducimus assumenda corrupti.</p>


</section>

css:

    #data{font-size: 16px;}
    a{text-decoration: none;}
    ul li{display: inline-block;}
    .active{border-bottom: 1px solid red;}
    .small{font-size: 12px;}
    .medium{font-size:22px;}
    .large{font-size: 26px;}

jQuery:

   <script>
    $(function(){


        $("li.medium").click(function(){
               $("#data").addClass("medium");
         });

     });

</script>

Answer 1

You have a simple CSS specificity problem here.

#data is a “stronger” selector than .medium .

One simple way to solve this, would be to increase the second selectors specificity, by including the id in it as well:

#data.medium { font-size:22px; }

But you should rather try and avoid using ids to select elements for styling purposes in the first place - because it easily leads to such problems in many cases.

Answer 2

Your css treats the #data p directive as more important than you medium class. Comment out the former and your code works with little change (specifically - preventDefault to stop the a click navigating away)

  $("li.medium").click(function(e){ e.preventDefault(); $("#data").addClass("medium"); return false; }); 

 /*#data p{font-size: 16px;}*/ a{text-decoration: none;} ul li{display: inline-block;} .active{border-bottom: 1px solid red;} .small{font-size: 12px;} .medium{ font-size:22px !important ;} .large{font-size: 26px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <ul> <li class="small"><a href="">Small</a></li> <li class="medium"><a href="">Medium</a></li> <li class="large"><a href="">Large</a></li> </ul> </header> <section id="data"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam molestiae accusamus molestias reprehenderit autem harum tenetur! Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio possimus nostrum, ducimus assumenda corrupti.</p> </section> 

Answer 3

two things you need to change:

• you need to prevent the default behavior from a using e.preventDefault();

• and then CSS specificity so use #data.medium

 $("li.medium").click(function(e) { e.preventDefault(); $("#data").addClass("medium"); }); 

 #data { font-size: 16px; } a { text-decoration: none; } ul li { display: inline-block; } .active { border-bottom: 1px solid red; } #data.small, .small{ font-size: 12px; } #data.medium, .medium { font-size: 22px; } #data.large, .large { font-size: 26px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <ul> <li class="small"><a href="">Small</a></li> <li class="medium"><a href="">Medium</a></li> <li class="large"><a href="">Large</a></li> </ul> </header> <section id="data"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam molestiae accusamus molestias reprehenderit autem harum tenetur! Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio possimus nostrum, ducimus assumenda corrupti.</p> </section> 

Answer 4

Set the font size of #data p to inherit, then it works.

#data p {
  font-size: inherit;
}

Reason why is that your #data with medium has 22px and the p inside has 16px , so the p will always be smaller, but if your set inherit on the p , then it works because then it takes the parent font-size

 $(function() { $("li.medium").click(function() { $("#data").addClass("medium"); }); }); 

 #data p { font-size: inherit; } a { text-decoration: none; } ul li { display: inline-block; } .active { border-bottom: 1px solid red; } .small { font-size: 12px; } .medium { font-size: 22px; } .large { font-size: 26px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <ul> <li class="small"><a href="#">Small</a></li> <li class="medium"><a href="#">Medium</a></li> <li class="large"><a href="#">Large</a></li> </ul> </header> <section id="data"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam molestiae accusamus molestias reprehenderit autem harum tenetur! Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio possimus nostrum, ducimus assumenda corrupti.</p> </section> 

Answer 5

 <!DOCTYPE html> <html> <head> <style> a{text-decoration: none;} ul li{display: inline-block;} .active{border-bottom: 1px solid red;} .small{font-size: 12px;} .medium{font-size:22px;} .large{font-size: 26px;} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".medium").click(function(){ $("#data").addClass("medium"); }); }); </script> </head> <header> <ul> <li class="small">Small</li> <li class="medium">Medium</li> <li class="large">Large</li> </ul> </header> <section id="data"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam molestiae accusamus molestias reprehenderit autem harum tenetur! Cumque doloribus sit eligendi! Autem iure minus dicta, distinctio possimus nostrum, ducimus assumenda corrupti.</p> </section> </html> 

The code was not working because, 1)you have given the text inside < a > tag so the change is done on clicking just few secs.2) You have already specified the font size for data.If you need you can remove the font size for data or add class to the "p" instead of the section.This one works fine!!