改變與原型或JavaScript

一個div的內容我有this代碼：改變與原型或JavaScript

<div class="box_container"> 
    <div class="box_container_button" id="navigator_1"> 
     Button 1 
    </div> 

    <div class="box_container_button" id="navigator_2"> 
     Button 2 
    </div> 

    <div class="box_container_button" id="navigator_3"> 
     Button 3 
    </div> 

    <div class="box_container_content" style="background-color:#d5d5d5;" id="navigator_content_1"> 
     Content 1    
    </div> 

    <div class="box_container_content" style="background-color:#00aeef; display:none;" id="navigator_content_2"> 
     Content 2    
    </div> 

    <div class="box_container_content" style="background-color:#4db848; display:none;" id="navigator_content_3"> 
     Content 3    
    </div>    
</div>

如果我按與navigator_2按鈕，navigator_content_1必須被隱藏，navigator_content_2表現。

我該如何用原型做到這一點？（或者如果它太強大的話）。不幸的是我不能使用jQuery。

來源

2011-06-09 markzzz

Prototype.js *是* JavaScript。 – 2011-06-09 09:27:02

我知道，作爲jQuery，但它更快/簡單/跨瀏覽器使用此框架:) – markzzz 2011-06-09 09:33:49

試試這個

function nav(obj) 
{ 
    document.getElementById("navigator_content_1").style.display = "hidden" 
    document.getElementById("navigator_content_2").style.display = "hidden" 
    document.getElementById("navigator_content_3").style.display = "hidden" 

    obj.style.display = "none"; 
}

添加onclick="nav(this)"每個按鈕元素。

來源

2011-06-09 09:15:13

試過，但它沒有工作http://jsfiddle.net/VCskB/2/ – markzzz 2011-06-09 09:20:46

無論如何，它適用於style.display =「none」;）也許你會編輯你的答案 – markzzz 2011-06-09 09:33:17

使用onclick屬性是不鼓勵的，特別是如果你使用js框架 – VAShhh 2011-06-09 09:52:48

這是我的建議：

給保持的按鈕，ID（爲方便起見）的容器。
將內容容器的ID從navigator_content_1更改爲navigator_1_content（同樣，爲了方便起見）。

然後，所有你需要做的是保持對當前顯示的內容窗格中的一個參考，你必須點擊處理程序附加到容器持有的按鈕：

// by default, the first panel is shown 
var current = document.getElementById('navigator_1_content'); 

document.getElementById('box_container').onclick = function(event) { 
    event = event || window.event; // for IE 
    var target = event.target || event.srcElement; // for IE 

    current.style.display = 'none'; 
    current = document.getElementById(target.id + '_content'); 
    current.style.display = 'block';   
};

這使得利用event bubbling 。 event.target引用了實際單擊的元素（我不知道Safari bug是否仍然存在，您可能必須遍歷DOM才能找到正確的元素）。這當然可以改善，但應該給你一個好的開始。您無需修改代碼即可輕鬆添加新按鈕/內容面板。

這是DEMO。

要了解更多有關事件處理的話，建議去看看在excellent articles at quirksmode.org

來源

2011-06-09 09:36:14

-1

這將使用原型，並得到你想要的東西

$$('.box_container_button').each(function(element) { 
    element.observe('click', function(event) { 
     $$('.box_container_content').each(function(element) { 
      element.setStyle({ 
       'display': 'none' 
      }); 
     }); 
     $('navigator_content_' + this.id.replace("navigator_", "")).setStyle({ 
      'display': 'block' 
     }); 
    }); 
});

http://jsfiddle.net/VENLh/

本的解決辦法即使你添加更多的按鈕/內容，而不改變javascript中的任何行（只需添加html部分！）

來源

2011-06-09 09:40:07 VAShhh

所以當你給-1你得到-1？枕頭大戰？ - 給我一個很好的理由。 – VAShhh 2011-06-09 10:05:15

改變與原型或JavaScript

回答

相關問題