CODEWITHSUNDEEP
javascriptangularjscordova
Mohammed Javed
Mohammed Javed

Reputation: 876

Add remove class functionality in JavaScript

I am making a add or remove class functionality in JavaScript but it is not working.

here is my code...

 if (window.location.hash == "#/profile/"){
        document.getElementById("tabMenu").removeClass("bottomTabs").addClass("hidden");
    } else{
        document.getElementById("tabMenu").className += "show";
    };

Upvotes: 1

Views: 2442

Answers (5)

Deepu--Java
Deepu--Java

Reputation: 3820

<script type="text/javascript">
$(document).ready(function () {
    if (window.location.hash == "#/profile/") {
        $("#tabMenu").hide();
    }
}
</script>

Try this code. Before this add jquery in your page

Upvotes: 0

jfriend00
jfriend00

Reputation: 707258

If you want some simple and general purpose functions in plain javascript for adding and removing classes that won't disturb any other classes on the element that you can use in lots of places, you can use these:

function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
}

function addClass(elem, cls) {
    elem.className += (" " + cls);
}


 var elem = document.getElementById("tabMenu");
 if (window.location.hash == "#/profile/"){
        removeClass(elem, "bottomTabs");
        addClass(elem, "hidden");
    } else {
        addClass(elem, "show");
 }

Upvotes: 1

j.wittwer
j.wittwer

Reputation: 9497

Since you are using angular, why not let ng-class do the adding and removing of classes?

<div ng-class="{'bottomTabs': !onProfile(), 'hidden': onProfile(), 'show': !onProfile()}">
</div>

You just need to create a function that returns true when the profile page is in view:

$scope.onProfile = function() {
   return window.location.hash == "#/profile";
};

Here is a working demo: http://plnkr.co/xh3KkxaHKuLtqIPpfE5Z

Upvotes: 0

shanks
shanks

Reputation: 922

If you are using AngularJS, then use the angular.element("#elementID") function to activate its internal jqlite so your code would look like this.

var tabMenu = angular.element("#tabMenu");
if (window.location.hash == "#/profile/"){
        tabMenu.addClass("hidden")
    } else{
        tabMenu.removeClass("hidden")
    };

Click here for angular.element documentation

Upvotes: 2

Kyo
Kyo

Reputation: 964

Using pure JS, it would look like below:

var myElement = document.getElementById("tabMenu");
if (window.location.hash == "#/profile/"){
    myElement.className = myElement.className.replace("bottomTabs", "");
    myElement.className = myElement.className + " hidden";
} else{
    myElement.className = myElement.className + " show";
};

See the demo below:

JSFiddle

Upvotes: 0

Related Questions