替代使用上一個div的onfocus改變邊界

當這些div的一個用戶點擊我想要它做的兩件事情：替代使用上一個div的onfocus改變邊界

顯示div的內容在div #bigScreen
突出顯示他們用邊框點擊的小div。一旦他們點擊了其他東西，我希望邊框恢復到原來的狀態。

得到它來打開邊界，但無法關閉它。看下面的例子。

<div id="2" class="previewPanelEntry" onclick="showIt(this.id)">2</div> 

<script> 
function showIt(id){ 
    /*-- onclick find all items highlighted and unhighlight them so there is only one selected --*/ 
    var highlighted = document.getElementsByClassName('highlighted'); 
    for (var d in highlighted) { 
    /*-- THIS IS WHAT DOESNT WORK --*/ 
    d.className = "previewPanelEntry"; 
    } 

    /*-- put contents of most recently selected div on the big screen --*/ 
    bigScreen.innerHTML = selection[id]; 

    /*-- highlight the most recently selected div --*/ 
    document.getElementById(id).className ="highlighted"; 

} 
</script>

下面有一個更完整的版本，但不會的jsfiddle運行是正確的，因爲需要的JavaScript的HTML加載後。不知道如何在jfiddle中指定。

http://jsfiddle.net/94zk7/2/

來源

2011-12-19 Jonathan Eckman

如果你想讓用戶點擊'div'，你爲什麼不使用'onclick'？ – robertc 2011-12-19 03:43:24

我是。剛編輯我原來的帖子。在我的第一行看到div。 – 2011-12-19 04:38:38

我已經updated your jsFiddle，這樣它的工作原理，即表示您想要的方式，下面的代碼：

window.onload=function(){ 
    var previewPanel = document.getElementById('previewPanel'); 
    var selection = ["a", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "z"]; 
    for (var c in selection) { 
     var newPreviewPanelEntry = document.createElement('div'); 
     newPreviewPanelEntry.id = c; 
     newPreviewPanelEntry.className = "previewPanelEntry"; 
     newPreviewPanelEntry.addEventListener('click',showIt); 
     newPreviewPanelEntry.innerHTML = "selection[" + c + "]"; 
     previewPanel.appendChild(newPreviewPanelEntry); 
    } 
    var newClear = document.createElement('div'); 
    newClear.className = "clear"; 
    previewPanel.appendChild(newClear); 

    function showIt(event) { 
     var siblings = event.target.parentNode.children; 
     for (var i=0; i<siblings.length; i++) { 
      siblings[i].style.border = ""; 
     } 
     event.target.style.border = "1px solid red"; 
     var bigScreen = document.getElementById('bigScreen'); 
     bigScreen.innerHTML = event.target.innerHTML; 
    } 
}

需要注意以下幾點：

jsFiddle將所有內容都包含在事件中調用的函數中10，這就是第一條線。這有一些後果，其中之一是..
沒有你的函數是全局的，他們只是load事件，這意味着關閉範圍內的存在...
您需要附加在DOM事件處理程序而不是添加onclick屬性，但實際上，無論如何，您都應該這樣做。我已經使用了addEventListener，請注意，這個won't work in older IE，您也可以附加如newPreviewPanelEntry.onclick = showIt，但這隻允許爲每個節點單個事件偵聽器。
您還沒有創建任何像previewPanel和bigScreen這樣的全局變量，所以我在代碼中添加了這個變量。
沒有必要爲您的陣列中的每個元素添加一個onclick偵聽器，只需將偵聽器添加到previewPanel，事件就會冒泡。你可以see this working here。這種方法的主要技巧是確保您正在處理您感興趣的元素的事件。例如，如果您將更多的子元素添加到可點擊的節點中，那麼每個子元素都可以觸發單擊事件。在這種情況下，除了我使用的支票外，您應該檢查event.target是否已定義了id。
我創建了一個版本，implemented your next and previous links，主要訣竅是在onload閉包中添加處理程序，而不是作爲attrubutes。

來源

2011-12-19 12:42:00 robertc

謝謝。你回答了我的問題，我的額外信貸jsfiddle問題，還有一個我沒有問。希望我能給你3個複選標記。 – 2011-12-19 13:44:26

如果創建物體周圍的一個錨鏈接應該成爲焦點/製表能...

例如：

<p>I can't tab to this text</p> 
<p><a href=#>But I can tab to this text</a></p>

我沒有在做HTML儘管如此，如果不是，你可以用SPAN之類的東西來完成它，然後編輯CSS屬性使其像DIV一樣工作（即display: block;）。

一些其他活動，你可能感興趣的：
的onmouseover（鼠標懸停在對象）
的onmouseout（鼠標離開對象）
的OnClick（點擊一次）
onmousedown事件（半點擊）
OnMouseUp（發佈點擊）
的onfocus你已經知道
的onblur（防焦）

如果你想切換兩種風格之間的DIV，它可能是更容易爲你的CSS做，並且只更改對象的類字段。

例如：

//style 
... 
.div-off { 
    border: 1px solid black; 
} 
.div-on { 
    border: 1px solid #BBDDFF; 
    background-color: #CCCCFF; 
} 
... 
//script 
... 
divList = new Array() {"div1","div2","div3"}; 
function switchStyle(obj) { 
    for (i=0; i<divList.length; i++) 
     document.getElementById(divList[i]).className = "div-off"; 
    obj.className = "div-on"; 
} 
... 
//html 
<div id="div1" class="div-off" onClick=switchStyle(this);>div1</div> 
<div id="div2" class="div-off" onClick=switchStyle(this);>div2</div> 
<div id="div3" class="div-off" onClick=switchStyle(this);>div3</div>

來源

2011-12-19 03:46:24 Ozzy

替代使用上一個div的onfocus改變邊界

回答

相關問題