javascript - 前期事件菜单链接

Question

我使用 Javascript 在单击后装饰事件链接。问题是，如何加载已激活菜单项之一的页面？

示例:http://moschalkx.nl/

Javascript 代码:

function hlite_menu(obj) {
    var lnk = document.getElementById('menu').getElementsByTagName('A');
    for (var i in lnk) {
        lnk[i].className = (lnk[i] === obj) ? 'menu_active' : 'menu_idle';
    }
}

function set_menu() {
    var lnk = document.getElementById('menu').getElementsByTagName('A');
    for (var i in lnk) {
        lnk[i].className = 'menu_idle';
        lnk[i].onclick = function () {
            hlite_menu(this);
        }
    }
    if (lnk[i]) { /* ??? how do you know whether this is the link to activeate up front? */
        hlist_menu(lnk[i]);
    }
}
window.onload = set_menu;

CSS:

a.menu_idle {color:#333333; text-decoration:none;}
a.menu_active {color:#333333; text-decoration:underline;}
a:visited {color:#333333; text-decoration:none;}
a:hover {color:#333333; text-decoration:underline;} 

我需要把逻辑放在里面的某个地方

if (lnk[i]) { /* ??? how do you know whether this is the link to activeate up front? */
    hlist_menu(lnk[i]);
}

让脚本知道哪个链接将预先激活。由于我不熟悉编码，所以我不知道该怎么做!

Answer 1

在您的标记中设置初始事件链接:

<a target="iframe1" class="menu_active" href="gallery/photo_menu.html">PHOTOGRAPHY</a>

然后在你的set_menu功能，设置iframe的 src属性为 href该链接的:

for (i in lnk) {
    if (lnk.hasOwnProperty(i)) {
        //lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
        lnk[i].onclick = hlite_menu;
        if (lnk[i].className === 'menu_active') {
            iframe.src = lnk[i].href;
        }
    }
}

我还强烈建议将您的 JavaScript 重写为以下内容:

var hlite_menu = function hlite_menu() {
    'use strict';
    var lnk = document.getElementById('menu').getElementsByTagName('a'),
        i = null;
    //set all links to idle
    for (i in lnk) {
        if (lnk.hasOwnProperty(i)) {
            lnk[i].className = 'menu_idle';
        }
    }
    //set this link to active
    this.className = 'menu_active';
},
set_menu = function set_menu() {
    'use strict';
    var lnk = document.getElementById('menu').getElementsByTagName('a'),
        iframe = document.getElementById('iframe1'),
        c = document.getElementById('copyright'),
        i = null;
    // set copyright
    c.innerText = (new Date()).getFullYear();
    // set onclicks and initial iframe src.
    for (i in lnk) {
        if (lnk.hasOwnProperty(i)) {
            //lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
            lnk[i].onclick = hlite_menu;
            if (lnk[i].className === 'menu_active') {
                iframe.src = lnk[i].href;
            }
        }
    }
};
window.onload = set_menu;

这避免了几个长期问题，例如可读性/维护，variable hoisting ，还有可怕的document.write (您正在使用它来设置您的版权日期)。您还需要将版权部分更改为:

<div id="footer">
    ALL IMAGES &#169; <span id="copyright"></span>
</div>

你也可以这样写你的导航(避免表格布局):

<div id="header">
    <div class="logo">
        <span style="">MO SCHALKX</span>
    </div>
    <div id="menu">
        <a target="iframe1" class="menu_active" href="gallery/photo_menu.html">PHOTOGRAPHY</a>
        <a target="iframe1" class="menu_idle" href="gallery/film_menu.html">FILM</a>
        <a target="iframe1" class="menu_idle" href="about.html">ABOUT</a>
        <a target="iframe1" class="menu_idle" href="http://reflecture.tumblr.com">BLOG</a>
    </div>
</div>

并将其添加到您的 CSS 中:

#header {
    float: left;
    display: inline-block;
    margin: 1em;
    text-align: center;
}

.logo, #menu {
    background-color: #FFF;
}

.logo {
    font-size: 40px;
    font-weight: 500;
    font-style: inherit;
}

#menu {
    margin-top: 5px;
}

#menu > a {
    padding-left: 0.25em;
}
#menu > a {
    border-left: 1px solid #000;
}

#menu > a:first-child {
    border-left: none;
}

这应该使它看起来一样。您还可以组合 menu_active 的 CSS 规则和 a:hover (与 menu_idle 和 a:visited 一样)像这样:

a.menu_idle, a:visited {
    color: #333333;
    text-decoration: none;
}

a.menu_active, a:hover {
    color: #333333;
    text-decoration: underline;
}

最后，您包装了您的 iframe在<form id="form1" runat="server">元素。您可以完全删除它。它不会影响您的布局，并且您实际上没有带有任何 input 的表单。元素，所以没有必要。此外，runat="server"除非您在 ASP.Net 上运行它(您显然不是)，否则该属性不会执行任何操作，因此您可能需要牢记这一点。

总而言之，您应该能够将整个文档源代码更改为以下内容，而不会发生真正的视觉变化(而且我认为您会发现在源代码中看起来更清晰):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Mo Schalkx Photography</title>
    <script type="text/javascript">
    var hlite_menu = function hlite_menu() {
        'use strict';
        var lnk = document.getElementById('menu').getElementsByTagName('a'),
            i = null;
        //set all links to idle
        for (i in lnk) {
            if (lnk.hasOwnProperty(i)) {
                lnk[i].className = 'menu_idle';
            }
        }
        //set this link to active
        this.className = 'menu_active';
    },
    set_menu = function set_menu() {
        'use strict';
        var lnk = document.getElementById('menu').getElementsByTagName('a'),
            iframe = document.getElementById('iframe1'),
            c = document.getElementById('copyright'),
            i = null;
        // set copyright
        c.innerText = (new Date()).getFullYear();
        // set onclicks and initial iframe src.
        for (i in lnk) {
            if (lnk.hasOwnProperty(i)) {
                //lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
                lnk[i].onclick = hlite_menu;
                if (lnk[i].className === 'menu_active') {
                    iframe.src = lnk[i].href;
                }
            }
        }
    };
    window.onload = set_menu;
    </script>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
        }

    #header {
        float: left;
        display: inline-block;
        margin: 1em;
        text-align: center;
    }

        #iframe1 {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        #footer {
            font-size: 9px;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            text-align: center;
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 20px;
            visibility: visible;
            display: block;
            color: #000;
            opacity: 0.4;
            filter: alpha(opacity=40);
            text-shadow: 0px 1px 0px rgba(255,255,255,.5); /* 50% white from bottom */;
        }

        .logo, #menu {
            background-color: #FFF;
        }

        .logo {
            font-size: 40px;
            font-weight: 500;
            font-style: inherit;
        }

        #menu {
            margin-top: 5px;
        }

        #menu > a {
            padding-left: 0.25em;
        }
        #menu > a {
            border-left: 1px solid #000;
        }

        #menu > a:first-child {
            border-left: none;
        }

        a.menu_idle, a:visited {
            color: #333333;
            text-decoration: none;
        }

        a.menu_active, a:hover {
            color: #333333;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="header">
        <div class="logo">
            <span style="">MO SCHALKX</span>
        </div>
        <div id="menu">
            <a target="iframe1" class="menu_active" href="gallery/photo_menu.html">PHOTOGRAPHY</a>
            <a target="iframe1" class="menu_idle" href="gallery/film_menu.html">FILM</a>
            <a target="iframe1" class="menu_idle" href="about.html">ABOUT</a>
            <a target="iframe1" class="menu_idle" href="http://reflecture.tumblr.com">BLOG</a>
        </div>
    </div>
    <div id="footer">
        ALL IMAGES &#169; <span id="copyright"></span>
    </div>
    <iframe id="iframe1" frameborder="0"></iframe>
</body>
</html>

更新

要在 http://moschalkx.nl/gallery/film_menu.html 上应用它, 只需包含相同的 JavaScript 并注释掉涉及在 set_menu 中设置版权的行并更新 id的 iframe :

var hlite_menu = function hlite_menu() {
    'use strict';
    var lnk = document.getElementById('menu').getElementsByTagName('a'),
        i = null;
    //set all links to idle
    for (i in lnk) {
        if (lnk.hasOwnProperty(i)) {
            lnk[i].className = 'menu_idle';
        }
    }
    //set this link to active
    this.className = 'menu_active';
},
set_menu = function set_menu() {
    'use strict';
    var lnk = document.getElementById('menu').getElementsByTagName('a'),
        iframe = document.getElementById('gallery'),
        //c = document.getElementById('copyright'),
        i = null;
    // set copyright
    //c.innerText = (new Date()).getFullYear();
    // set onclicks and initial iframe src.
    for (i in lnk) {
        if (lnk.hasOwnProperty(i)) {
            //lnk[i].className = 'menu_idle'; // initial menu states are set in markup. This line is no longer necessary.
            lnk[i].onclick = hlite_menu;
            if (lnk[i].className === 'menu_active') {
                iframe.src = lnk[i].href;
            }
        }
    }
};
window.onload = set_menu;

此外，由于您在此页面上包含了 jQuery，因此您可以在 jQuery 中将其编写为:

$(document).ready(function () {
    $('#menu a').click(function (e) {
        var self = $(this),
            href = self.attr('href');
        $('#menu a').not(self).removeClass('menu_active').addClass('menu_idle');
        self.removeClass('menu_idle').addClass('menu_active');
        $('#gallery').attr('src', href);
    });
});