Question

好的，这可能已被问过几十次了。但我不确定我需要搜索哪种技术或术语才能找到更多相关信息。

我所拥有的是无序的元素列表。每个人都在我正在进行的项目中充当屏幕。每个元素都是浏览器窗口的大小，因此它更像是一个功率点表示，然后是任何东西，如果我在任何意义上描述它我在这里的逻辑。所以我想要做的是找出视图中任何特定幻灯片何时处于活动状态。我只有在视图处于活动状态时才会加载一些图像。但我真正想要的是根据我所在的幻灯片突出显示导航。导航是一个固定的元素，所以它总是在屏幕上，而其他一切只是漂浮在其中，在谈话中。我需要这个的另一个原因是导航直到第二张幻灯片才生效。所以我需要一种方法来触发导航只有当第一张幻灯片不在视图中时才显示自己，当第一张幻灯片在视图中时我会将其删除。

希望我对此有所了解，任何人都有任何想法？

Answer 1

尝试在进入视图时向视图中的元素添加类，在将视图放入视图时删除同一类的所有其他实例。

类似

$('.active').removeClass('e_active');
$(this).addClass('e_active');

可以让您找到当前的活动元素。或者，如果您使用元素ID来查找元素，则可以执行

$('#element').addClass('e_active')

其中'#element'是活动元素

如果您点击要获取ID的元素，可以使用以下内容：

HTML：

<ul class="slides">
  <li id="elem1" class="e_active">content1</li>
  <li id="elem2">content2</li>
  <li id="elem3">content3</li>
  <li id="elem4">content4</li>
</ul>

<ul class="nav">
  <li data-link="elem1">Link1</li>
  <li data-link="elem2">Link2</li>
  <li data-link="elem3">Link3</li>
  <li data-link="elem4">Link4</li>
</ul>

然后使用脚本你可以做这样的事情：

$('li', '.nav').click(function(){
  elem = $(this).data('link');
  $('.e_active').removeClass('e_active');
  $('#'+elem, '.slides').addClass('e_active');
})

这将使您能够在样式表中使用.e_active和任何jquery代码来更改活动元素。

当然，如果您在滚动或按键上执行此操作，方法是相同的，您只需将该函数附加到relavent事件处理程序。

另外，对于“导航”问题，当第一张幻灯片的元素ID同时包含$('.nav').hide()和e_active时，您只需要使用$('.nav').show() t，在nav元素中添加和删除类nav_hidden这样的类，这样它就不会重复显示它。

视图/窗口中的jQuery JavaScript Detect对象

1 个答案: