为现有元素在点击时添加叠加

Question

• 我有一个基于Ratchet的超基础布局

   <div id="view1"> <header class="bar bar-nav" id="header1"> <h1 class="title">My Application</h1> </header> <div class="content" id="content1"> <nav class="bar bar-tab" id="nav1"> <a class="tab-item active" href="#" id="navitem1"> <span class="icon icon-home"></span> <span class="tab-label">Home</span> </a> <a class="tab-item " href="#" id="navitem2"> <span class="icon icon-info"></span> <span class="tab-label">About</span> </a> </nav> </div> </div> 

• 当用户点击的元件上（满足某些标准，例如有一个ID组），覆盖要添加覆盖仅这一个元件 （不是一个完整的页面之一，而根本不搞乱布局）

• 如果嵌套元素收到click事件，则将首先选择最后一个元素，如果用户再次单击，则选择满足条件的下一个子元素。 （意思是：如果在页面的底部，用户点击，在view1 ，拾取首先如果他再次点击，这将是content1 ，然后nav1 ，等...）

这主要是一个实验，但我仍然无法弄清楚。

我尝试了不同的解决方案（或插件，例如ContentHover ），但没有一个起作用。

有任何想法吗？

---

UPDATE

我可以描述问题的最短方法是：我想复制检查器（Chrome / Safari）突出显示不同元素的方式。

---

小提琴： http : //jsfiddle.net/pta2mbcv/

Answer 1

jQuery的event.target应该为您完成。 在此处查看文档。

这不是一个肯定的答案，但是我已经为您编写了一些代码，我们可以对其进行迭代。 仅当单击的元素具有ID时，此覆盖才会显示。

JSFidlle

覆盖jQuery

$(document).on('click', function (event) {

  var target = $(event.target);

  if( target.attr('id') ) {
      target.addClass('overlay');
  }

});

叠加CSS

.overlay:before {
    position: absolute;
    content:'';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(5, 11, 37, 0.5);
}