圖片庫不斷導致頁面跳轉

我試圖創建一個CCS和HTML僅圖像庫滑塊。圖片庫不斷導致頁面跳轉

我得到了滑塊的工作，但是無論何時按下按鈕，焦點都會跳到頁面上。

我用盡了一切我能想到的，但沒有成功:(

任何幫助將是巨大的

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="Style.css"> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
</div> <!-- end of header --> 

<nav> 
<ul> 

<a href="index.html"><li id="HomeButton"><img id="HomeText" src="Images/Icons/HomeText.png" /> 
</li></a> 

<a href="whatswhat.html"><li id="WhatsWhatButton"> 
<img id="WhatsWhatText" src="Images/Icons/WhatsWhatText.png" /> 
</li></a> 

<a href="FoodFromPlants.html"><li id="FoodFromPlantsButton"> 
<img id="FoodFromPlantsText" src="Images/Icons/FoodFromPlantsText.png" /> 
</li></a> 

<a href="howplantsgrow.html"><li id="HowPlantsGrowButton"> 
<div id="HowPlantsGrowText"><img src="Images/Icons/HowPlantsGrowText.png" /> 
</div> 
<div id="HowPlantsGrowIcon"></div> 
</li></a> 

<a href="plantGame.html"><li id="PlantGameButton"> 
<img id="PlantGameText" src="Images/Icons/PlantGameText.png" /> 
</li></a> 
</ul> 

<form> 
<select accesskey="S" onchange="window.location.href=this.value;"> 
<option value="index.html">Home</option> 
<option value="whatswhat.html">Whats What</option> 
<option value="FoodFromPlants.html">Food From Plants</option> 
<option value="howplantsgrow.html">How Plants Grow</option> 
</select> 
</form> 

</nav> <!-- end of nav --> 

<div id="page"> 
<div id="content"> 

<img class="title" src="Images/Icons/FoodFromPlantsTitle.png" width="250" height="100"/> 

<div id="images"> 
    <img id="image1" src="Images/ImageGallery/Bananas.jpg" /> 
    <img id="image2" src="Images/ImageGallery/Apples.jpg" /> 
    <img id="image3" src="Images/ImageGallery/Broccoli.jpg" /> 
    <img id="image4" src="Images/ImageGallery/Carrots.jpg" /> 
    <img id="image5" src="Images/ImageGallery/Onions.jpg" /> 
    <img id="image6" src="Images/ImageGallery/Peas.jpg" /> 
</div> 
<div id="slider"> 
    <a href="#image1">1</a> 
    <a href="#image2">2</a> 
    <a href="#image3">3</a> 
    <a href="#image4">4</a> 
    <a href="#image5">5</a> 
    <a href="#image6">6</a> 

</div> 
</div> <!-- end of content --> 
</div> <!-- end of page --> 

<footer> 
</footer> <!-- end of footer --> 
</div> <!-- end of container --> 
</body> 
</html>

CSS：

#images { 
    width: 400px; 
    height: 250px; 
    overflow: hidden; 
    position: relative; 
    margin: 20px auto; 
} 
#images img { 
    width: 400px; 
    height: 250px; 
    position: absolute; 
    top: 0; 
    left: -400px; 
    z-index: 1; 
    opacity: 0; 
    transition: all linear 500ms; 
    -o-transition: all linear 500ms; 
    -moz-transition: all linear 500ms; 
    -webkit-transition: all linear 500ms; 
} 
#images img:target { 
    left: 0; 
    z-index: 9; 
    opacity: 1; 
} 
#images img:first-child { 
    left: 0; 
} 
#slider a { 
    text-decoration: none; 
    background: #E3F1FA; 
    border: 1px solid #C6E4F2; 
    padding: 4px 6px; 
    color: #222; 
} 
#slider a:hover { 
    background: #C6E4F2; 
}

來源

2013-04-20 WibblyWobbly

什麼在'SlideShow.js'？看看你是否可以在http://jsfiddle.net上得到一個演示。 – chrx 2013-04-20 22:20:04

和他的同行是一個錨點，如果你點擊超鏈接，頁面通常會關注相關的錨點，如果點擊了..需要看到javascript，看看是否可以被減輕 – Silvertiger 2013-04-20 22:26:36

焦點跳到頁面上。？怎麼樣？你能更清楚地解釋一下嗎？ – 2013-04-20 23:05:55

我懷疑你可以在不添加JavaScript的情況下修復你當前的方法。

使用jQuery，在點擊時淡入淡出圖像會非常簡單。

查看這個jsFiddle作爲一個生動的例子。

<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script> 

<script> 
$(document).ready(function(){ 
$(".selector").click(function() { 
$('#image1').fadeToggle(); 
}); 
</script>

只需將「.selector」替換爲要用作觸發器的元素的類或標識符。

來源

2013-04-21 04:25:10 apaul

是否需要將庫鏈接到該庫？ – WibblyWobbly 2013-04-21 20:17:08

@MattMeadows是需要一個庫，請參閱更新的答案。 – apaul 2013-04-21 21:30:58

@MattMeadows更便宜的刺激，你可以添加時間和寬鬆 - http://jsfiddle.net/apaul34208/sVmTn/2/ – apaul 2013-04-22 03:08:23

圖片庫不斷導致頁面跳轉

回答

相關問題