前期活动菜单链接

时间:2012-12-08 10:59:28

标签: javascript css

我使用的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]);
}

让脚本知道哪个链接会提前处于活动状态。由于我不熟悉编码,我不知道如何做到这一点!

1 个答案:

答案 0 :(得分:0)

在标记中设置最初活动的链接:

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

然后在set_menu函数中,将iframe的{​​{1}}属性设置为该链接的src

href

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

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

这可以避免一些长期问题,例如可读性/维护,variable hoisting和可怕的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; (您用来设置版权日期)。您还需要将版权部分更改为:

document.write

您也可以像这样编写导航(避免布局表格):

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

并将其添加到您的CSS:

<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>

应该使它看起来一样。您还可以将#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(同样与a:hovermenu_idle)的CSS规则结合使用,如下所示:

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">元素的表单,因此不需要。此外,除非您在ASP.Net上运行此属性,否则input属性不会执行任何操作(您显然不是这样),因此您可能需要牢记这一点。

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

runat="server"

<强> UDPATE

要在http://moschalkx.nl/gallery/film_menu.html上应用此功能,只需添加相同的JavaScript并注释掉<!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> 中涉及设置版权的行并更新set_menu的{​​{1}}:

id

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

iframe