Question

我试图拥有一个包含多个亚马逊产品的网页，这些产品都在他们自己的div中，标签是唯一的ID：

<div  class="product">
<a id="lite1" href="http://www.amazonAffLink.com">
<img class="aligncenter" src="http://www.imageForTheLink.com" />
</a>
</div>

我在1页上有21个这样的产品（id =＆＃34; lite1到lite21＆＃34;），需要做两件事。

1：人员在点击链接后直接到达产品页面上并带有偏移量（因此产品不在屏幕截止的最顶部但朝向设置）

那个div点亮了（我想：当他们到达时选择）

我的css现在是

.product {
  display: inline-block;
  position: relative;
  min-width: 250px;
  border: 2px solid #fff;
}

.product:hover {
  border-color: #3bb3b3;
}

因此，这给了我鼠标悬停时的选择，但应该立即选择，以便用户可以根据他们刚刚从上一页/电子书中点击的内容来判断他们正在查看哪个产品。

非常感谢！我不确定它是否需要js或jquery但是无论做什么工作都没问题。

Answer 1

您可以使用CKEDITOR.lang.load("en", "en", function() { CKEDITOR.lang.en.format.tag_p = "Paragraph"; CKEDITOR.lang.en.format.tag_h2 = "Header"; CKEDITOR.lang.en.format.tag_h3 = "Sub-Header"; }); // Init editor here伪类来更改与url哈希中给定id匹配的元素的样式：

:target

根据滚动，正常的行为是浏览器本身应该滚动到与url中的片段匹配的元素。

无论它是否是同一页链接，浏览器的行为都是滚动页面，直到该元素位于页面顶部。要么，如果它不能滚动那么远，它就可以。这非常重要要知道，因为这意味着要利用这个＆＃34;陈述＆＃34;行为有点棘手/有限。 source

Answer 2

这两件事都可以用jQuery完成。

使用此插件可以实现自动滚动功能：http://plugins.jquery.com/scrollTo/。只需使用以下语法滚动到页面上的特定元素：

$(element).scrollTo(target[,duration][,settings]);

或者（最好，如果您确切知道这些元素在页面上的显示位置），您可以使用window.scroll函数：

window.scroll(x-coord, y-coord);

至于＃34;选择＆＃34;选项，这应该通过一个类来完成。您应该使用＆＃34; onclick＆＃34;设置类。 event和jQuery toggleClass或addClass / removeClass函数，如下所示：

$(".product").click(function(){
   $(".product").not(this).removeClass("selected");
   $(this).toggleClass("selected");
})

当用户到达URL＃divid时选择div

2 个答案: