在JavaScript中添加删除类功能

Question

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";
    };

Answer 1

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

Answer 2

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");
 }

Answer 3

<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

Answer 4

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

Answer 5

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