How can I add/remove a class to an element when URL contains a specific string?

Question

I have some tabs:

<!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" id="hometab" class="active"><a href="http://www.mypage.com/" >Home</a></li>
    <li role="presentation" id="contenttab"><a href="#content" aria-controls="content" role="tab" data-toggle="tab">content</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">home</div>
    <div role="tabpanel" class="tab-pane" id="content">content</div>
  </div>

And I would like to add a class to the tab, when my URL contains the string ?dir.

So for example: if my URL is www.mypage.com/?dir=something then #contenttab should be active. And if the URL is for example only www.mypage.com then #contenttab should not be active but #hometabshould be active.

    <script type="text/javascript">
$(document).ready(function() {
    var url = location.pathname;
    if ("url:contains('?dir')") {
        $("#contenttab").attr("class","active");
        $("#hometab").removeClass("active");

    } else {
    $("#contenttab").removeClass("active");
    $("#hometab").attr("class","active");
    }

});        
</script>

My script is not working. #contenttabis always active and #hometab is never active.

Norlihazmey Ghazali · Accepted Answer · 2016-02-13T15:16:33.297

4

Try checking with this :

if ( url.indexOf( '?dir' ) !== -1 ) { ... }

Or try with :

var url = location.search; // or location.href;

if ( url.indexOf( '?dir' ) !== -1 ) { ... }

edited Feb 13 '16 at 15:16

answered Feb 13 '16 at 15:08

Norlihazmey Ghazali

9,000
1
23
40

I tried it, and now #hometab is always active – peace_love Feb 13 '16 at 15:10
What the value of `location.pathname`? – Norlihazmey Ghazali Feb 13 '16 at 15:17
Yes,` location.search` worked! – peace_love Feb 13 '16 at 15:18
Guess right, cause usually `location.pathname` only returned `/` before `?dir`. – Norlihazmey Ghazali Feb 13 '16 at 15:19

score 0 · Answer 2 · answered Feb 13 '16 at 15:10

0

    var url = location.pathname;

    if (url.indexOf('?dir') > -1) {
        $("#contenttab").attr("class", "active");
        $("#hometab").removeClass("active");

    } else {
        $("#contenttab").removeClass("active");
        $("#hometab").attr("class", "active");
    }

answered Feb 13 '16 at 15:10

Jobelle

2,717
1
15
26

Thank you, but now if the URL is `http://www.mypage/?dir=something` the `#hometab` is active. – peace_love Feb 13 '16 at 15:13

score 0 · Answer 3 · edited May 23 '17 at 11:59

Try using test:

<script type="text/javascript">
        $(document).ready(function() {
            if (/\?dir/.test(location.pathname)){
                $("#contenttab").attr("class","active");
                $("#hometab").removeClass("active");
            } else {
                $("#contenttab").removeClass("active");
                $("#hometab").attr("class","active");
            }
        });        
</script>

Thanks to the answer How can I get query string values in JavaScript? I think that the best and safe way to do what you need, is to get the querystring parameter dir. Of course the function getParameterByName() will return useful to get any other querystring parameter.

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var dir=getParameterByName('dir');

$(document).ready(function() {
    if (dir==''){
        $("#contenttab").attr("class","active");
        $("#hometab").removeClass("active");
    } else {
        $("#contenttab").removeClass("active");
        $("#hometab").attr("class","active");
    }
});

Note: If a parameter is present several times (?dir=lorem&dir=ipsum), you will get the first value (lorem).

Unfortunately if the URL is `http://www.mypage/?dir=something` the `#hometab` is active. — peace_love, Feb 13 '16 at 15:16

How can I add/remove a class to an element when URL contains a specific string?

3 Answers3