Javascript可視性を切り替える質問

Question

これでJavascriptを動作させようとしています。また、私は完全にJavascriptに新しいです。基本的に私がしようとしているのは、私のページの左側にホーム、about、response、script exercise、final project、contactというリンクを持つメニューがあります。これらのそれぞれには、CSSページにラベル付きdiv id（#home、#about、#response ...）があり、すべてがページの同じ位置に配置され、非表示になっています。リンクをクリックすると、対応するdiv IDがページ上に表示されるはずです。私は、問題は、このスクリプトがIEで動作し、ある1998年

フェリペBottrelソウザによってメニュースクリプトでフェードを題した古いスクリプトから、このコードを適応

function show(listx) { 

    home.style.visibility = "hidden" 
    about.style.visibility = "hidden" 
    response.style.visibility = "hidden" 
    script.style.visibility = "hidden" 
    project.style.visibility = "hidden" 
    contact.style.visibility = "hidden" 

    listx.style.visibility = "visible" 

    } 

function shows(listz) { 

    home.style.visibility = "hidden" 
    about.style.visibility = "hidden" 
    response.style.visibility = "hidden" 
    script.style.visibility = "hidden" 
    project.style.visibility = "hidden" 
    contact.style.visibility = "hidden" 

    listz.style.visibility = "visible" 

    } 

：私が使用しているコードは、このです、Chrome、およびSafariのいずれかになりますが、Firefoxでは使用できません。

どのようなアイデアや助けも大歓迎です！

Answer 1

"home"、 "about"などの変数を呼び出すことは、ページロード時にdiv idを指定しない限り、div idを指していません。 idが自動的にJavaScriptでそれに名前を与えることを想定していない何かを与える

var home, about, response, script, project, contact, listx; 
window.onload = function() { 
    home = document.getElementById('home'); 
    about = document.getElementById('about'); 
    response = document.getElementById('response'); 
    script = document.getElementById('script'); 
    project = document.getElementById('project'); 
    contact = document.getElementById('contact'); 
    listx = document.getElementById('listx'); 
} 

Answer 2

：これを試してみてください。多くのブラウザは古いコードとの互換性のためにそれを行いますが、気づいたとおり、信頼できないので避けてください。

代わりにdocument.getElementByIdメソッドを使用して、要素をidで参照する必要があります。例えば

、あなたはdocument.getElementById("home")でhomeのすべてのインスタンスを置き換えることができ、またはあなたがそれらを初めて使用するときにアクセスするすべての要素を定義します。

var home = document.getElementById("home"); 

Answer 3

ここでこれをコーディングするよりコンパクトな方法です：

ページ内のこれらのオブジェクトには、これらの名前に一致するCSS IDがあります。

var hideList = ["home", "about", "response", "script", "project", "contact"]; 

function show(listx) { 
    for (var i = 0; i < hideList.length; i++) { 
     document.getElementById(hideList[i]).style.visibility = "hidden"; 
    } 
    document.getElementById(listx).style.visibility = "visible"; 
} 

あなただけの1つの機能に適切なオブジェクト名を渡すことができますので、私は渡されたパラメータで、彼らが唯一異なるようshow()とshows()ための別の機能のための必要性を全く見ません。

jQueryやYUIのような最新のライブラリを使用している場合は、各オブジェクトに特定のクラス名を非表示にするだけで、ページ内のすべてのオブジェクトをそのクラス名で1つの関数呼び出しで配列にフェッチすることができますその配列内の項目を操作します。これは、ページの内容が変更された場合、コードを一致させるために変更する必要がないため、よりメンテナンス性が向上します。

Answer 4

jQuery、プロトタイプ、MooToolsなどのjavascriptライブラリを使用することをおすすめします。何でも。

もしあなたがJavaScriptを使い慣れていないなら、DOMに精通している時間を無駄にしないでください。それはあなたを永遠に連れてくるでしょうし、他人がすぐにスーパーにできるものを手に入れることはできません。

たとえば、苦労しているコードは、次のようにすることができます。彼らはすべての（理論上）でのコンテナのdiv要素だとお互いの兄弟であるので、まず第一に、それは超簡単で次のようになります。

$('#listx').show().siblings().hide(); 

おっと！ 1行のコード。簡単なピーシー。生のjavascriptで時間を無駄にしないでください！