Javascript 在div上使用onfocus更改边框的替代方法

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

在div#大屏幕中显示div的内容

用边框突出显示他们单击的小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>

2
函数showIt（id）{
/*--单击“查找所有高亮显示的项目”并取消高亮显示，以便只选择一个项目--*/
var highlighted=document.getElementsByClassName（'highlighted'）；
for（突出显示的变量d）{
/*--这是不起作用的--*/
d、 className=“previewPanelEntry”；
}
/*--将最近选择的div的内容放在大屏幕上--*/
bigScreen.innerHTML=选择[id]；
/*--突出显示最近选择的div--*/
document.getElementById（id）.className=“突出显示”；
}

这里有一个更完整的版本，但JSFIDLE无法正确运行它，因为javascript需要在html之后加载。不确定如何在jfiddle中指定此项

---

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

例如：

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

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

我已经准备好了，所以它可以按照您所希望的方式工作，下面是代码：

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;
    }
}

window.onload=function（）{
var previewPanel=document.getElementById（'previewPanel'）；
风险值选择=[“a”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”、“11”、“12”、“13”、“14”、“15”、“16”、“z”]；
for（选择中的var c）{
var newPreviewPanelEntry=document.createElement（'div'）；
newPreviewPanelEntry.id=c；
newPreviewPanelEntry.className=“previewPanelEntry”；
newPreviewPanelEntry.addEventListener（'单击'，显示它）；
newPreviewPanelEntry.innerHTML=“选择[”+c+“]”；
previewPanel.appendChild（newPreviewPanelEntry）；
}
var newClear=document.createElement（'div'）；
newClear.className=“clear”；
previewPanel.appendChild（newClear）；
函数showIt（事件）{
var sides=event.target.parentNode.children；
对于（var i=0；ii）如果你想让用户点击
div
，为什么不使用
onclick
？我是。刚刚编辑了我的原始帖子。请看我第一行的div。哇，谢谢。你回答了我的问题，我的额外学分问题，还有一个我没有问的问题。希望我能给你3个复选标记。