有div的，當用戶到達網址＃DIVID選擇

我試圖與它們每一個自己的div內和標籤的唯一ID的多個亞馬遜產品頁面：有div的，當用戶到達網址＃DIVID選擇

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

我有21個產品像這樣在1頁（id =「lite1到lite21」），需要2件事情發生。

1：點擊鏈接

後人直接到達產品頁上有偏移（因此該產品不處於屏幕截止的最頂部，但向設定）

該div亮起（我猜：選擇當他們到達）

我的CSS現在

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

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

所以這給了我選擇的鼠標懸停，但它應該是立即selecte因此，用戶可以根據他們剛剛從上一頁/電子書中點擊的內容來確定他們正在查看的產品。

非常感謝！我不確定它是否需要js或jquery，但是完成任務無論如何都是好的。

來源

2015-11-03 ramitaste

可以使用:target僞類來改變在URL中的散列給定id匹配的元素的樣式：

:target { 
    border-color: #3bb3b3; 
}

按滾動，正常的行爲是瀏覽器本身應該滾動到與url中的片段相匹配的元素。

無論頁面是否爲同一頁面鏈接，瀏覽器的行爲是滾動頁面直到頁面頂部。或者，儘可能可以，如果它不能那麼遠滾動。這是相當重要的知道，因爲這意味着利用此「規定」的行爲是有點棘手 /有限。 source

來源

2015-11-03 23:05:00 taxicala

：target worked！謝謝。我仍然需要抵消它，因此該項目位於頁面中間。頂部：-100像素雖然不工作。沒有辦法做到這一點嗎？ – ramitaste

@ramitaste看看這個問題，我認爲它可以幫助你http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors – taxicala

這兩件事都可以用jQuery來完成。

自動滾動功能，可以用這個插件來實現：http://plugins.jquery.com/scrollTo/。只需使用以下語法滾動到特定元素在頁面上：

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

或者（最好，如果你知道恰恰是這些元素會出現在頁面上），你可以使用window.scroll功能：

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

至於「選擇」選項，這應該通過一個類來完成。您應該使用「onclick」事件和jQuery toggleClass或addClass/removeClass函數設置類，如下所示：

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

來源

2015-11-03 23:05:15 user3495690

有div的，當用戶到達網址＃DIVID選擇

回答

相關問題