如何将css类添加到<；部门>；通过javascript函数_Javascript_Html_Web

如何将css类添加到<；部门>；通过javascript函数

javascript html web

如何将css类添加到<；部门>；通过javascript函数,javascript,html,web,Javascript,Html,Web,我对网络编程和javascript相当陌生。我习惯于在非web项目中使用as3或java 我已经编写了一些javascript来显示和隐藏网站上的div。我希望显示与单击的菜单项对应的div，并隐藏所有其他项但是，代码不起作用。我尝试过几种方法，但我显然对javascript不够熟悉，无法使其正常工作基本上，我想在我想要显示的div中添加一个.visibleContent类，这样css3转换将使其淡入，而当删除该类时，css3转换将使其淡出谁能给我解释一下我做错了什么？我这样做对吗？我知道

我对网络编程和javascript相当陌生。我习惯于在非web项目中使用as3或java

我已经编写了一些javascript来显示和隐藏网站上的div。我希望显示与单击的菜单项对应的div，并隐藏所有其他项

但是，代码不起作用。我尝试过几种方法，但我显然对javascript不够熟悉，无法使其正常工作

基本上，我想在我想要显示的div中添加一个.visibleContent类，这样css3转换将使其淡入，而当删除该类时，css3转换将使其淡出

谁能给我解释一下我做错了什么？我这样做对吗？我知道Jquery，但我认为仅仅为了这个而导入这个库太过分了。我想使用javascript本身

我的html中的链接和div：

<li><a href="javascript:;" onClick='navClick("page1");'>page 1 button</a></li>
<li><a href="javascript:;" onClick='navClick("page2");'>page 2 button</a></li>

<div id="pages">
    <div id="page1">
        <p> page 1 content </p>
    </div>

    <div id="page2">
        <p> page 2 content </p>
    </div>
</div>

当我直接在html标记中将.visibleContent类添加到一个div中时，内容会显示为它应该显示的内容，而当我不将该类添加到div中时，它确实是不可见的。当我使用navClick函数尝试动态添加类时，什么都没有发生。。。

怎么了？

如果您不想使用jQuery，您仍然可以使用：

我知道你不想仅仅为了这么简单的东西而包含10k行js代码，但是如果你的网站中有其他javascript内容，请不要犹豫。它不仅更干净，而且更安全，因为它显然编码良好、更短，任何熟悉jQuery的人都可以阅读。

检查浏览器的错误控制台以获取错误消息。您有一个语法错误。（以下是从Firebug复制/粘贴的内容）

这也会被和所接受。

这是一段在Firefox（Linux）上运行的稍加修改的代码。请记住，并非所有浏览器（如Chrome等）都接受“纯”CSS3，并且可能需要额外的CSS代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="icon" href="favicon1.ico" type="image/x-icon">
<style type="text/css">

    .initial {
        opacity: 0;
    }

    .unvisibleContent {
        opacity: 0;
        /*position: fixed;*/
        width:55%;
        height: 65%;
        top: 10%;
        left: 100%;
        background: #00FF00;
        animation: fadeOutAnimation 1s linear 1;
        animation-iteration-count: 1;
    }

    @keyframes fadeOutAnimation
    {
        from {opacity:1;}
        to {opacity:0;}
    }

    .visibleContent {
         opacity: 1;
        /*position: fixed;*/
        width: 55%;
        height: 65%;
        top:10%;
        left:40%;
        background: #00FF00;
        animation: fadeInAnimation 1s linear 1;
        animation-iteration-count: 1;
    }
    @keyframes fadeInAnimation
    {
        from {opacity:0;}
        to {opacity:1;}
    }
</style>

</head>
<body>
<ul>
    <li><a href="javascript:;" onClick='navClick("page1");'>page 1 button</a></li>
    <li><a href="javascript:;" onClick='navClick("page2");'>page 2 button</a></li>
</ul>
<div id="pages">
    <div id="page1" class="initial">
    <p> page 1 content </p>
    </div>

    <div id="page2" class="initial">
    <p> page 2 content </p>
    </div>
</div>
<script type="text/javascript">
    var page1 = document.getElementById('page1');
    var page2 = document.getElementById('page2');

    var pageArray = new Array();
    pageArray.push(page1);
    pageArray.push(page2);

    function hasClass(element,cls) {
    return element.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }

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

    function removeClass(ele) {
    ele.className="";
    }

    function navClick(id) {
    var e = document.getElementById(id);
    for (var i = 0; i < pageArray.length; i++) {
        if (pageArray[i] == e) {
        if (!hasClass(e, 'visibleContent')) {
            removeClass(e);
            addClass(e, 'visibleContent');
        }
        } else
        if (hasClass(pageArray[i], 'visibleContent')) {
            removeClass(pageArray[i]);
            addClass(pageArray[i], 'unvisibleContent');
        }
    }
    }
</script>
</body>
</html>


.首字母{
不透明度：0；
}
.看不见的内容{
不透明度：0；
/*位置：固定*/
宽度：55%；
身高：65%；
排名前10%；
左：100%；
背景：#00FF00；
动画：淡出动画1s线性1；
动画迭代次数：1；
}
@关键帧淡出动画
{
从{opacity:1；}
到{不透明度：0；}
}
.可见内容{
不透明度：1；
/*位置：固定*/
宽度：55%；
身高：65%；
排名前10%；
左：40%；
背景：#00FF00；
动画：fadeInAnimation 1s线性1；
动画迭代次数：1；
}
@关键帧fadeInAnimation
{
从{opacity:0；}
到{opacity:1；}
}




第1页内容
第2页内容
var page1=document.getElementById（'page1'）；
var page2=document.getElementById（'page2'）；
var pageArray=新数组（）；
pageArray.push（第1页）；
pageArray.push（第2页）；
函数类（元素，cls）{
return element.className.match（新的RegExp（“（\\s | ^）”+cls+”（\\s |$））；
}
函数addClass（元素，cls）{
element.className+=（“”+cls）；
}
函数removeClass（ele）{
ele.className=“”；
}
功能导航单击（id）{
var e=document.getElementById（id）；
对于（变量i=0；i

如果您真的想在本机javascript中执行此操作，则需要更好的查找机制来查找DOM入口

'page1'

和

'page2'

这里有一些我经常制作和使用的糖果，其中

loop

和

pool

通过元素的对象

前后移动。函数

sel（）

中具有属性

atr

和给定

值的所有元素的数组（）。因此，您还可以看到循环
和池
在这个函数中是如何工作的。我写这篇文章是因为我还需要一些本地javascript来加速和缩短我在一个更大的项目中编写的一些代码
var dc = document;

function byid() {
    return dc.getElementById(arguments[0]) || null;
}

function byclass() {
    var a = arguments.length == 2 ? arguments[1] : dc.all;
    return sel(a, "class", arguments[0]) || null;
}

function bytag() {
    return dc.getElementsByTagName(arguments[0], arguments[1]) || null;
}

function byname() {
    return dc.getElementsByName(arguments[0])[0] || null;
}

function taglength() {
    return bytag(arguments[0], arguments[1]).length || null;
}

function loop(o, f) {
    var l = o.length;
    for (var i = 0; l > i; i++) f(o[i]);
} //forward


function pool(o, f) {
    var l = o.length;
    for (var i = l; i--;) f(o[i]);
} //backward


function sel(o, atr, val) {
    var r = [];
    var e = 0;
    pool(o, function(o) {
        if (o.getAttribute(atr) === val) {
            r[e++] = o;
        }
    });
    return r;
}

我想我会第一个说：为什么不使用jQuery？你能在你的网站/项目中使用jQuery吗？当他已经解释了为什么不想使用jQuery时，你为什么还要问他是否不能使用jQuery？此外，只有当人们已经知道如何自己制作这些东西时，才应该使用jQuery，否则人们仍然是新手。Virus721，除了为这样一个小功能添加一个巨大的库这一事实有点过分之外，我完全同意你的观点。在熟悉编程语言之前，我不喜欢使用库，因为我希望能够编写自己的代码，而不是被教程、示例和库所束缚。什么时候开始有JavaScript类了/@病毒721-没有。这个关键字是为（可能是）未来可能的功能保留的。是的，所以他们意识到，像PHP一样，这种语言是一种纯粹的垃圾语言，并希望尝试将其转变为一种经典的继承/类语言。迫不及待。谢谢，我已将“class”更改为“cls”，但仍然不起作用。您的pageArray查找机制不起作用，始终为null
。另外，hasClass regex可以更容易地使用cls.test（element.className），这将检查cls是否在className内，并返回true或false谢谢，但我真的希望它能通过我自己的代码工作。了解如何使用javascript很重要，因为我计划进行更多的web开发。通常我会学习一门新的语言，但这个网站需要尽快上线，所以我请求帮助
function hasClass(element, class) {
SyntaxError: class is a reserved identifier

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="icon" href="favicon1.ico" type="image/x-icon">
<style type="text/css">

    .initial {
        opacity: 0;
    }

    .unvisibleContent {
        opacity: 0;
        /*position: fixed;*/
        width:55%;
        height: 65%;
        top: 10%;
        left: 100%;
        background: #00FF00;
        animation: fadeOutAnimation 1s linear 1;
        animation-iteration-count: 1;
    }

    @keyframes fadeOutAnimation
    {
        from {opacity:1;}
        to {opacity:0;}
    }

    .visibleContent {
         opacity: 1;
        /*position: fixed;*/
        width: 55%;
        height: 65%;
        top:10%;
        left:40%;
        background: #00FF00;
        animation: fadeInAnimation 1s linear 1;
        animation-iteration-count: 1;
    }
    @keyframes fadeInAnimation
    {
        from {opacity:0;}
        to {opacity:1;}
    }
</style>

</head>
<body>
<ul>
    <li><a href="javascript:;" onClick='navClick("page1");'>page 1 button</a></li>
    <li><a href="javascript:;" onClick='navClick("page2");'>page 2 button</a></li>
</ul>
<div id="pages">
    <div id="page1" class="initial">
    <p> page 1 content </p>
    </div>

    <div id="page2" class="initial">
    <p> page 2 content </p>
    </div>
</div>
<script type="text/javascript">
    var page1 = document.getElementById('page1');
    var page2 = document.getElementById('page2');

    var pageArray = new Array();
    pageArray.push(page1);
    pageArray.push(page2);

    function hasClass(element,cls) {
    return element.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }

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

    function removeClass(ele) {
    ele.className="";
    }

    function navClick(id) {
    var e = document.getElementById(id);
    for (var i = 0; i < pageArray.length; i++) {
        if (pageArray[i] == e) {
        if (!hasClass(e, 'visibleContent')) {
            removeClass(e);
            addClass(e, 'visibleContent');
        }
        } else
        if (hasClass(pageArray[i], 'visibleContent')) {
            removeClass(pageArray[i]);
            addClass(pageArray[i], 'unvisibleContent');
        }
    }
    }
</script>
</body>
</html>

var dc = document;

function byid() {
    return dc.getElementById(arguments[0]) || null;
}

function byclass() {
    var a = arguments.length == 2 ? arguments[1] : dc.all;
    return sel(a, "class", arguments[0]) || null;
}

function bytag() {
    return dc.getElementsByTagName(arguments[0], arguments[1]) || null;
}

function byname() {
    return dc.getElementsByName(arguments[0])[0] || null;
}

function taglength() {
    return bytag(arguments[0], arguments[1]).length || null;
}

function loop(o, f) {
    var l = o.length;
    for (var i = 0; l > i; i++) f(o[i]);
} //forward


function pool(o, f) {
    var l = o.length;
    for (var i = l; i--;) f(o[i]);
} //backward


function sel(o, atr, val) {
    var r = [];
    var e = 0;
    pool(o, function(o) {
        if (o.getAttribute(atr) === val) {
            r[e++] = o;
        }
    });
    return r;
}