javascript - 更改当前事件 div 内的 div 的 css(在页面加载时)

Question

我有一个页面，用户可以通过点击电子书进入该页面。当他们点击一个链接时，它会根据链接将他们带到页面上的产品，看起来像

example.com/#product1

example.com/#product6

example.com/#product15,

etc...

页面已经使用此代码滚动到页面的那部分:

<script type="text/javascript">
jQuery(document).ready(function(){
     jQuery('html,body').animate({
          scrollTop: jQuery(window.location.hash).offset().top-150
      }, 900, 'swing');
});

我在 #product1 div 中有另一个名为 #amazonbutton 的 div，其样式为 display:none。

<div id="product1" class="product">
  <a href="link">
    <div id="amazonbutton"><img src="amazonbuttonz" />
    </div>
  </a>
</div>

这是因为它是对除当前选定的 div 之外的所有元素隐藏的“转到亚马逊”按钮。所以基本上，按钮应该为 :active div 显示，同时为所有非事件 div 保持其原始状态(隐藏)。

如何使用 jquery 更改它？

我有这段不完整的代码，我卡住了:

jQuery(function() {
  jQuery('amazonbutton').each(function() {
    if (jQuery(this).attr('href')  ===  window.location.href) {
      jQuery(this).addClass('active');
    }
  });
}); 

提前致谢!

Answer 1

有一个很酷的东西叫做 document.activeElement 。它是跟踪当前事件元素的只读属性。

$('.yourdivclass').hide();
$(document.activeElement).show();

你可以通过.focus() .activate()激活一个元素