在gallery.php中點擊時突出顯示縮略圖

我製作了一個gallery.php。代碼如下：在gallery.php中點擊時突出顯示縮略圖

<div id="galleryImage">  
    <ul>  
     <li> 
      <a href= "gallery.php?imgName='artistvan'"> 
      <img src="thumbnail/artistvan.jpg" title="The artist van" alt="The artist van"/></a> 
     </li> 
     .... 
     .... 
    </ul> 
</div>

我一直保持25 L1標籤的25張圖片。

thumnails位於div標籤的右側。點擊縮略圖時，出現相關圖像。我通過imgName作爲參數。所以，它從MySQL中檢索相關圖像。

我的問題是，當我點擊縮略圖時，縮略圖應該改變，因此可以找出哪個鏈接被點擊。當我點擊時，它會檢索圖像，但點擊圖像和未點擊的圖像之間沒有區別。

我試了很多CSS和JavaScript，但我無法弄清楚。我希望你的幫助。非常感謝。

來源

2014-02-11 Toie

你是如何改變它的？你需要更具體一點，並提供一些你已經嘗試過的例子。 –

如果你想讓它保持在同一頁面上，那麼javascript（閱讀AJAX）就是要走的路。您可以使用表單和頁面加載（純PHP/HTML）來完成此操作，但在我看來這會有點笨拙。 –

在gallery.php頁面，我製作了標籤，以顯示25個縮略圖。這些縮略圖位於標籤之間。我想要的是，當我點擊一個縮略圖時，該圖像應該改變，以查看點擊縮略圖和未點擊縮略圖之間的區別。如果這是不可理解的，我會再次輸入代碼並嘗試使其可以理解。請讓我知道.. – Toie

嘗試加入一些類用於指示與jQuery的點擊縮略圖：

$('.myThumbnail').click(function(){ 
    $(this).addClass('clickedThumbnailClass'); 
    /* rest of code */ 
})

來源

2014-02-11 15:15:47 Justinas

我以前沒有用過jquery。我已經使用JavaScript，但沒有太多。所以，JavaScript現在會很舒服。我可以得到幫助 – Toie

@Toie我建議你使用jQuery（拯救非洲兒童：D）。在js中添加類：http://stackoverflow.com/questions/2739667/add-another-class-to-a-div-with-javascript – Justinas

你可以嘗試jQuery。在任何情況下，你不想使用jQuery看看在這裏add and remove a class without jQuery

$('#galleryImage img').click(function() { 
    $(this).addClass('active'); 
});

JSFIDDLE

來源

2014-02-11 15:18:21 Johnny000

沒有太多的不同，那麼別人，而是爲了防止其他圖片來自有你同樣的效果應該包括這個額外的行。

$('ul li')，請務必將ul li更改爲您的圖片將會選擇的選項。

的jQuery：

$(document).ready(function() { 
    $('ul li').on('click', function() { 
     $('ul li').removeClass('active'); // removes the active class form the other images 
     $(this).addClass('active'); 
    }); 
});

最後，小提琴：Demo

要建立自己的網站使用jQuery請按照下列步驟操作，

確保添加到您的<head>標記鏈接到jQuery庫：

<script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script>

接下來，您可以添加一個腳本插入腳本代碼或自己.js文件：

<script type="text/javascript"> 
    /* Script goes here */ 
</script>

script標籤可以去你的HTML文檔的結束或開始。

來源

2014-02-11 15:23:45

嗨，這是我第一次嘗試使用JS。我從你的鏈接中看過DEMO。我想先在我的本地主機上嘗試相同的代碼。我在Dreamweaver中粘貼了代碼。你會友善地告訴我插入JS代碼什麼我使用。

在gallery.php中點擊時突出顯示縮略圖

回答