0

我对网络编程和 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>

这是javascript，请注意我已经从这里复制了hasClass、addClass和removeClass函数：dynamic add/remove style in javascript

var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');

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


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

function addClass(element,class) {
    if (!this.hasClass(element,class)) element.className += " "+class;
}

function removeClass(ele,cls) {
    if (hasClass(element,class)) {
        var reg = new RegExp('(\\s|^)'+class+'(\\s|$)');
        element.className=element.className.replace(reg,' ');
    }
}

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

这是相关的CSS：

 #pages div {
        opacity: 0;
        position: fixed;
        width:55%;
        height: 65%;
        top: 10%;
        left: 100%;
        background: #00FF00;
        animation fadeOutAnimation 1s linear 1; 
    }

    .visibleContent {
        opacity: 1;
        position: fixed;
        width: 55%;
        height: 65%;
        top:10%;
        left:40%;
        background: #00FF00;
        animation: fadeInAnimation 1s linear 1;
    }

当我直接在 html 标记中将 .visibleContent 类添加到 div 时，内容会按原样显示，当我不将类添加到 div 时，它确实是不可见的。当我使用我的 navClick 函数尝试动态添加类时，什么也没有发生……怎么了？

4

4 回答 4

1

这是在 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>
于 2013-04-15T19:03:02.210 回答
0

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

function hasClass(element, class) {
SyntaxError: class is a reserved identifier

这也将被JSLint和JSHint拾取。

于 2013-04-15T17:53:04.943 回答
0

如果您真的想在原生 javascript 中执行此操作，则需要更好的查找机制来查找 DOM 条目'page1'和'page2'.

在这里，我经常制作和使用一些糖果，通过元素对象在哪里loop以及pool正在前进和后退。o函数sel()返回一个 Array() 中所有元素的o属性atr和给定的value。所以你也看到了这个函数是如何工作的loop。pool我写这个是因为我还需要一些本机 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;
}
于 2013-04-15T20:35:07.077 回答
-1

如果您不想使用 jQuery，您仍然可以使用：http: //james.padolsey.com/jquery/#v=1.7.2&fn=hasClass 我知道您不想包含 10k 行 js 代码只为这么简单的事情，但如果您的网站中有其他 javascript 内容，请不要犹豫。它不仅更干净，而且更安全，因为它的代码肯定很好，更短，并且任何了解 jQuery 的人都可以阅读。

于 2013-04-15T17:46:11.480 回答