0

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

让脚本知道哪个链接将预先处于活动状态。由于我不熟悉编码，我不知道如何做到这一点！

4

1 回答 1

0

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

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

这避免了几个长期问题，例如可读性/维护、变量提升和可怕的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;
}

这应该使它看起来一样。您还可以将您的 CSS 规则与menu_activeand a:hover（同样与menu_idleand 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>

UDPATE

要在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);
    });
});
于 2012-12-09T15:04:31.467 回答