在div上使用onfocus来改变边框的替代方法

当用户点击其中一个div时，我希望它做两件事:

显示div的内容在div #bigScreen

可以打开边框但不能关闭。

<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/

我已经更新了你的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将所有内容包装成一个函数，该函数在window的load事件中调用，这就是第一行。这有一些后果，其中之一是……
没有一个函数是全局的，它们只存在于load事件的闭包范围内，这意味着…
您需要在DOM中附加事件处理程序，而不是通过添加onclick属性，但是，实际上，无论如何您都应该这样做。我已经使用了addEventListener，请注意，这在旧的IE中不起作用，你也可以像newPreviewPanelEntry.onclick = showIt一样附加，但这只允许每个节点有一个事件监听器。
你没有创建任何全局变量，如previewPanel和bigScreen，所以我添加了代码。

onclick

previewPanel

event.target

id

我创建了一个版本，实现了你的下一个和以前的链接，再次主要的技巧是在onload闭包内添加处理程序，而不是作为属性。

如果你在一个对象周围创建一个锚链接，它应该是可聚焦的/可选项卡的…

的例子:

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

我没有做HTML在一段时间，但仍然，尝试它与一个DIV，如果不是你可以做它与其他东西，如SPAN，然后编辑CSS属性，使它像一个DIV(即display: block;)。

您可能感兴趣的其他活动:
OnMouseOver(鼠标悬停在对象上)
OnMouseOut(鼠标离开对象)
OnClick(点击一次)
OnMouseDown(半点击)
OnMouseUp(释放点击)
你已经知道OnFocus
OnBlur(反对焦)

如果你想在两种样式之间切换DIV，使用CSS可能更容易，只需要改变对象的class字段。

的例子:

//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>

相关内容

最新更新

热门标签：