Creating a CSS Class in Jquery

Creating a CSS class in jQuery

Actually, you can create a CSS rule that will affect all elements on the current page. In most browsers it should be as simple as:

var style = $('<style>body { background: green; }</style>')
$('html > head').append(style);

This may or may not work in IE, however you can use IE's proprietary addRule instead:

document.styleSheets[0].addRule('body', 'background: green', -1);

Naturally this will not assist you in creating css files that can be shared between webpages, but it is a handy way of affecting the style of a large number of elements without the need to iterate over them.

Change css class content with JQuery

You can use two different css file and switch the URL in link tag on an event.

<link rel="shortcut icon" href="FIRST_CSS_FILE_URL">

$('button').click(function() {
    $('link').attr('href', SECOND_CSS_FILE_URL)   
})

Add css class onClick with jquery

This should work but boostrap already has it.

$(".tab-pane").click(function(){
      $(".tab-pane").removeClass("active"); //to remove active class from other tabs
      $("this").addClass("active"); //to add active class to clicked tab
    });

changing css class and a jquery function when it reaches a div

I believe I understood the effect you're trying to achieve.

In my solution I listen to the scroll event on the document and when I reach a new section I check whether that section contains a particular class, if it does I alter my navbar class to match the style I want to display.

Check this Fiddle for more information.

It goes like this:

HTML:

<nav>
 <p class="js_header white">
   Text
 </p>
</nav>

<section class="bg-black"></section>
<section class="bg-white"></section>
<section class="bg-black"></section>
<section class="bg-white"></section>

CSS (the important part):

nav .white { 
  color: white;
}

nav .black { 
  color: black;
}

section.bg-black {
  background-color: black;
}

section.bg-white {
  background-color: white;
}

Javascript:

$(document).scroll(function (e) {
  $.each($('section'), function (index, section) {
    if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
      if ($(section).hasClass('bg-black')) {
        $('.js_header').removeClass('black');      
        $('.js_header').addClass('white');      
      } else {
        $('.js_header').removeClass('white');      
        $('.js_header').addClass('black');
      }
    }
  });
});

UPDATE: Ok I got what you mean on your comments, in order to change the nav click behaviour when changing the class you need to add the listener to the body targeting the selector you want, instead of binding to the specific class from the beginning.

The JS would go like this for the changing the click behaviour:

$('body').on('click', '.nav-trigger', function() {
    alert('light clicked');
    $(this).toggleClass('on');
    $('.nav-menu').fadeToggle(200);
});

$('body').on('click', '.nav-trigger-dark', function() {
    alert('dark clicked');
    $(this).toggleClass('on');
    $('.nav-menu').fadeToggle(200);
});

I've altered your snippet to the following:

$('body').on('click', '.nav-trigger', function() {    alert('light clicked');    $(this).toggleClass('on');    $('.nav-menu').fadeToggle(200);});
$('body').on('click', '.nav-trigger-dark', function() {    alert('dark clicked');    $(this).toggleClass('on');    $('.nav-menu').fadeToggle(200);});
$(document).scroll(function (e) {      $.each($('section'), function (index, section) {       if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){      if ($(section).hasClass('bgwhite')) {            $('.js_navbar').removeClass('nav-trigger');                  $('.js_navbar').addClass('nav-trigger-dark');          } else {            $('.js_navbar').removeClass('nav-trigger-dark');                  $('.js_navbar').addClass('nav-trigger');             }        }      });    });

* {  box-sizing: border-box;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;}
*, *:before, *:after {  box-sizing: inherit;}
html {  box-sizing: border-box;}
body {  margin: 0;  font-family: "Advent Pro", sans-serif;  overflow-x: hidden;}
section {  width: 100%;  padding: 0 7%;  display: table;  margin: 0;  max-width: none;  background-color: #23222a;  height: 100vh;  color: #fff;}
.content {  display: table-cell;  vertical-align: middle;  color: #fff;}
.nav-trigger {  width: 30px;  height: 30px;  position: fixed;  top: 10px;  right: 10px;  z-index: 20;  cursor: pointer;  -webkit-transition: top .1s ease-in-out;  transition: top .1s ease-in-out;}.nav-trigger span {  display: block;  width: 100%;  height: 2px;  background: #fff;  margin: 7px auto;  -webkit-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);}.nav-trigger span:first-child {  top: 0;  left: 0;}.nav-trigger span:nth-child(2) {  width: 20px;  top: 10px;  left: 0;}.nav-trigger span:last-child {  top: 20px;  left: 0;}.nav-trigger .on {  top: 10px;}
.nav-trigger.on span:first-child {  -webkit-transform: translateY(10px) rotate(45deg);  transform: translateY(10px) rotate(45deg);}
.nav-trigger.on span:nth-child(2) {  -webkit-transform: translateX(50px);  transform: translateX(50px);  opacity: 0;}
.nav-trigger.on span:last-child {  -webkit-transform: translateY(-8px) rotate(-45deg);  transform: translateY(-8px) rotate(-45deg);}
.nav-trigger-dark {  width: 30px;  height: 30px;  position: fixed;  top: 10px;  right: 10px;  z-index: 20;  cursor: pointer;  -webkit-transition: top .1s ease-in-out;  transition: top .1s ease-in-out;}.nav-trigger-dark span {  display: block;  width: 100%;  height: 2px;  background: #000;  margin: 7px auto;  -webkit-transition: all 0.3s ease-in-out;  transition: all 0.3s ease-in-out;  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);}.nav-trigger-dark span:first-child {  top: 0;  left: 0;}.nav-trigger-dark span:nth-child(2) {  width: 20px;  top: 10px;  left: 0;}.nav-trigger-dark span:last-child {  top: 20px;  left: 0;}.nav-trigger-dark .on {  top: 10px;}
.nav-trigger-dark.on span:first-child {  -webkit-transform: translateY(10px) rotate(45deg);  transform: translateY(10px) rotate(45deg);}
.nav-trigger-dark.on span:nth-child(2) {  -webkit-transform: translateX(50px);  transform: translateX(50px);  opacity: 0;}
.nav-trigger-dark.on span:last-child {  -webkit-transform: translateY(-8px) rotate(-45deg);  transform: translateY(-8px) rotate(-45deg);}
.nav-menu {  height: 100%;  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  display: none;  z-index: 19;  overflow: hidden;}.nav-menu ul {  list-style-type: none;  padding: 0;  margin: 0;  width: 100%;  max-width: 100%;  text-align: center;  position: relative;  -webkit-transition: opacity .35s, visibility .35s, height .35s;  transition: opacity .35s, visibility .35s, height .35s;}.nav-menu ul a {  position: relative;  float: left;  margin: 0;  width: 25%;  height: 100vh;  text-align: center;  cursor: pointer;  background: #e65454;  color: #fff;  text-decoration: none;}@media (max-width: 30em) {  .nav-menu ul a {    width: 100%;    height: 25vh;  }}.nav-menu ul a li {  position: absolute;  text-transform: uppercase;  font-family: "Advent Pro", sans-serif;  top: 45%;  left: 0;  position: relative;  -webkit-animation: fadeInRight .5s ease forwards;  animation: fadeInRight .5s ease forwards;}@media (max-width: 30em) {  .nav-menu ul a li {    top: 25%;  }}.nav-menu ul a h2.mb {  -webkit-transition: -webkit-transform 0.35s;  transition: -webkit-transform 0.35s;  transition: transform 0.35s;  transition: transform 0.35s, -webkit-transform 0.35s;  margin-bottom: -20px;  font-size: 2.25rem;  /* 36/16 */}@media (max-width: 30em) {  .nav-menu ul a h2.mb {    font-size: 1.688rem;    /* 27/16 */  }}@media (min-width: 48em) and (max-width: 61.9375em) {  .nav-menu ul a h2.mb {    font-size: 2rem;    /* 32/16 */    margin-bottom: -13px;  }}.nav-menu ul a h2.mt {  -webkit-transition: -webkit-transform 0.35s;  transition: -webkit-transform 0.35s;  transition: transform 0.35s;  transition: transform 0.35s, -webkit-transform 0.35s;  margin-bottom: -73px;  font-size: 2.25rem;  /* 36/16 */}@media (max-width: 30em) {  .nav-menu ul a h2.mt {    font-size: 1.688rem;    /* 27/16 */  }}@media (min-width: 48em) and (max-width: 61.9375em) {  .nav-menu ul a h2.mt {    font-size: 2rem;    /* 32/16 */  }}.nav-menu ul a i {  font-style: normal;  opacity: 0;  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, -webkit-transform 0.35s;  transition: opacity 0.35s, transform 0.35s;  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;  -webkit-transform: translate3d(0, -30px, 0);  transform: translate3d(0, -30px, 0);  font-size: 1.875rem;  /* 30/16 */}@media (max-width: 30em) {  .nav-menu ul a i {    display: none;  }}.nav-menu ul a:hover {  background: #fff;  color: #e65454;}.nav-menu ul a:hover h2 {  -webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);}.nav-menu ul a:hover i {  opacity: 1;  -webkit-transform: translate3d(0, 0, 0);  transform: translate3d(0, 0, 0);}.nav-menu ul a.active {  background: #fff;  color: #e65454;}.nav-menu ul a.active:hover {  color: #000;}
@-webkit-keyframes fadeInRight {  0% {    opacity: 0;    left: 20%;  }  100% {    opacity: 1;    left: 0;  }}@keyframes fadeInRight {  0% {    opacity: 0;    left: 20%;  }  100% {    opacity: 1;    left: 0;  }}.bgwhite {  background: #fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-trigger js_navbar">   <span></span><span></span><span></span>  </div>  <div class="nav-menu">   <ul>    <a href="#"> <li><h2 class="mt">Home</h2><i>Go to</i></li></a>    <a href="#"><li><h2 class="mb">About</h2><i>Me</i></li></a>    <a href="#"><li><h2 class="mt">Work</h2><i>My</i></li></a>    <a href="#"><li><h2 class="mb">Contact</h2><i>Me</i></li></a>   </ul>  </div><section>  <div class="content">        </div>  </section><section class="bgwhite">  <div class="content">        </div>  </section>

Add to a css class using JQuery

You cannot directly update the CSS classes in a separate css file with jQuery. You could however create a <style> tag and add/overwrite a CSS class:

$('<style>.newClass { color: red; }</style>').appendTo('body');

When updating a CSS class, you'll need to take care the cascading order. Otherwise, it may not turn out to be the effect you are after.

Change CSS rule in class using JQuery

jQuery.css will find all existing elements on the page that have the Foo class, and then set their inline style width to 40px.

In other words, this doesn't create or change a css rule -- if you dynamically add an element with the Foo class, it would still have a width of 20px, because its inline style hasn't been set to override the default CSS rule.

Instead, you should use addClass and removeClass and control the styles in your static CSS.

Creating a CSS Class in Jquery