0

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

  1. 在 div #bigScreen 中显示 div 的内容
  2. 用边框突出显示他们单击的小 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/

4

2 回答 2

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 将所有内容包装到一个函数中，该函数在load事件中调用window，这就是第一行的内容。这有一些后果，其中之一是..
  • 你的函数都不是全局的，它们只存在于load事件的闭包范围内，这意味着......
  • 您需要在 DOM 中附加事件处理程序，而不是通过添加onclick属性，但实际上，无论如何您都应该这样做。我已经addEventListener为此使用过，请注意，这在旧版 IE 中不起作用，您也可以像这样附加，newPreviewPanelEntry.onclick = showIt但这仅允许每个节点有一个事件侦听器。
  • 您还没有创建任何像previewPaneland这样的全局变量bigScreen，所以我为此添加了代码。
  • 没有必要为onclick数组中的每个元素添加侦听器，只需将侦听器添加到previewPanel，事件就会冒泡。你可以在这里看到这个工作。这种方法的主要技巧是确保您正在处理您感兴趣的元素的事件。例如，如果您向可点击节点添加更多子元素，则每个子元素都可以触发点击事件。在这种情况下，除了我使用的检查之外，您可能还应该检查是否event.target已id定义。
  • 我创建了一个实现你的下一个和上一个链接的版本，主要技巧是在onload闭包中添加处理程序而不是作为属性。
于 2011-12-19T12:42:00.240 回答
0

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

例子：

<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 可能会更容易，并且只更改对象的类字段。

例子：

//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-19T03:46:24.453 回答