0

クリックされた後にアクティブなリンクを装飾する Javascript を使用します。質問は、メニュー項目の 1 つが既にアクティブになっているページをどのようにロードできますか?

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

同じように見えるはずです。menu_active次のように、およびa:hover（およびと同様にmenu_idle）a:visitedのCSSルールを組み合わせることもできます。

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のを更新します。idiframe

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 に答える