-3

質問: 初心者レベルのコード: Pure Javascript

JavaScript の for ループを介してメインのナビゲーション項目をレンダリングする Web ページを作成しました。メイン ナビゲーションの下に、各メイン コンテンツ div に異なる ID を割り当てたコンテンツをいくつか作成しました。

ここで、任意のナビゲーション アイテムの onclick が必要です。それぞれのコンテンツ div が表示されます。jsfiddle リンクを見つけてください: http://jsfiddle.net/shabirgilkar/GKLJz/1/

純粋なJavaScriptでそれを行う方法を知っているかもしれません. どんな助けでも大歓迎です。

4

2 に答える 2

1

ナビゲーション ボックス内のテキストが div.contents の ID と一致する場合、このコードは機能するはずです。私が助けてくれることを願っています。

old="home";
        function init() {
            document.getElementById('about').style.display = 'none';
            document.getElementById('products').style.display = 'none';
            document.getElementById('services').style.display = 'none';
            document.getElementById('career').style.display = 'none';
            document.getElementById('faq').style.display = 'none';
            document.getElementById('contact').style.display = 'none';
        var pages = document.querySelectorAll('a.box');
        for(i=0;i<pages.length;i++){
          pages[i].onclick=function(e){
              document.getElementById(old).style.display='none';
              old=e.target.innerHTML.toLowerCase();
              document.getElementById(old).style.display='inline-block';
              }
        }
            }
于 2012-06-14T11:06:07.260 に答える
0

わかりました、私はあなたのフィドルを更新しました: http://jsfiddle.net/GKLJz/3/

トリックは、配列内のメニュー項目にIDを割り当て、onClickクリックしたものに応じてcssクラスを切り替える関数を呼び出すことです...

そして、きれいにしたい場合は、クラスを変更する代わりに、ここで説明されているjQueryスライドのように、いくつかのjsアニメーション効果を使用してください

ところで、 init() 関数を完全に.hidden省略して、デフォルトとして他のdiv に割り当てることができます

于 2012-06-14T11:18:36.717 に答える