在JavaScript中添加删除类功能

时间:2014-04-09 05:34:38

标签: javascript angularjs cordova

我在JavaScript中添加或删除类功能,但它无效。

这是我的代码......

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

5 个答案:

答案 0 :(得分:2)

如果您使用的是AngularJS,请使用angular.element("#elementID")函数激活其内部jqlite,以便您的代码看起来像这样。

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

Click here for angular.element documentation

答案 1 :(得分:1)

如果你想在普通的javascript中使用一些简单和通用的函数来添加和删除不会干扰你可以在很多地方使用的元素上的任何其他类的类,你可以使用这些:

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

答案 2 :(得分:0)

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

试试这段代码。在此之前在页面中添加jquery

答案 3 :(得分:0)

使用纯JS,它看起来如下所示:

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

请参阅下面的演示:

JSFiddle

答案 4 :(得分:0)

由于您使用的是角色,为什么不让ng-class进行类的添加和删除?

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

您只需要创建一个在配置文件页面处于视图中时返回true的函数:

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

这是一个有效的演示:http://plnkr.co/xh3KkxaHKuLtqIPpfE5Z