Jquery Add Class Based on Page Url

jQuery add class based on page URL

You can use window.location to get the current URL, and then switch based on that:

$(function() {
  var loc = window.location.href; // returns the full URL
  if(/technology/.test(loc)) {
    $('#main').addClass('tech');
  }
});

This uses a regular expression to see if the URL contains a particular phrase (notably: technology), and if so, adds a class to the #main element.

jQuery add class based on parent URL

I solved it like this instead, skipping the whole idea with text-decoration.
I added an arrow. Finished.

JS:

var url = window.location.href;
  var msg = document.getElementById('current-menu-item-arrow');
  if( url.search( 'my-word' ) > 0 ) {
      msg.style.display = "block";
  }

CSS:

#current-menu-item-arrow {display:none;}

jQuery add class based on page URL with separate classes

The slice method return an array so all you need to do is removing the [0] so that you can have all your classes.

You should also put 2 as the paramater of slice so that it can take all your classes after your base url.

var url = " http://www.test.com/news/hello/"var dir = url        .split('?')[0]        .split('/')        .filter(function (i) { return i !== ""})        .slice(2);        $("div p").addClass(dir);

.news {  color: red;}
.hello {  font-size: 20px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>  <p>Hello world</p></div>

Add class to body if url has /shop/

$(document).ready(function() {
    if(window.location.href.match('example.com/shop')){
        $("body").addClass("shop");
    }
});

Using jQuery To Add Class Based On URL

You need a break after each case or else it will just go on to the next one.

switch (window.location.pathname) {
    case '/p/about.html':
       $('.nav-about').addClass('current');
       break;
    case '/search/blog':
       $('.nav-blog').addClass('current');
       break;
    case '/p/design.html':
       $('.nav-design').addClass('current');
       break;
    case '/p/photography.html':
       $('.nav-photography').addClass('current');
       break;
    case '/p/hosting.html':
       $('.nav-hosting').addClass('current');
       break;
}

---

Side point, this is repetitive:

  $(document).ready(function(){
    $(function() {

Both of those mean the same thing, use one of them.

JQuery - Add active class based on URL but also different following sub paths

This will work

I converted my simpler script to jQuery to stay consistent with your code

const getPath = url => {
  const path = new URL(url).pathname
  const parts = path.split("/");
  return parts.length < 3 || !parts.includes("tag") ? parts[1] : parts[3]
};

const path = getPath("https://yourserver.com/insight"); // getPath(location.href)

$("#nav a").each(function() {
  const lnkPath = getPath($(this).prop("href"));
  $(this).toggleClass("active", path === lnkPath)
})

.active {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
  <a class="topic-link" href="/insight/page/1">All</a>
  <a class="topic-link" href="/insight/tag/technology">Technology</a>
  <a class="topic-link" href="/insight/tag/support">Support</a>
</div>

jQuery: Add class depending on URL in the best way

$( document ).ready(function() {

    // Re-set all on entry
    $("#progess-1, #progess-2, #progess-3, #progress-4").removeClass("inactive active");

    // Then check for the correct one to make active
    if(location.search == "?route=account/login&SSL")
        $("#progess-1").addClass("active");
    else if(location.search == "?route=checkout/cart")
    {
        $("#progess-2").addClass("active");
        $("#progess-1").addClass("inactive");
    }
    else if(location.search == "?route=checkout/checkout")
    {
        $("#progess-3").addClass("active");
        $("#progess-1,#progess-2").addClass("inactive");
    }
    else if(location.search == "?route=checkout/success")
    {
        $("#progess-4").addClass("active");
        $("#progess-1,#progess-2,#progess-3").addClass("inactive");
    }
});

This can also be achieved by replacing the if statement with a switch.

---

Related Topics