[英]Clicking link returns page to top
我設置了圖像,所以當您單擊它們時,它們各自在它們下面顯示了一個不同的div。
我在這里找到了原始代碼: http : //www.dynamicdrive.com/forums/showthread.php?74782-Changing-content-in-Div-upon-Link-Click
這是我的代碼:
#workSamples {
width:960px;
margin:auto;
}
#button1 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 20px 10px;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
}
.b1 {
width:300px;
height:236px;
overflow:hidden;
}
.b1 img {
height:auto;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.b1 img:hover {
margin-top: -236px;
}
#button2 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
}
#button3 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
}
#button1:focus~#content #def,
#button2:focus~#content #def,
#button3:focus~#content #def,
#button4:focus~#content #def {display:none;}
#button1:focus~#content div:nth-child(2),
#button2:focus~#content div:nth-child(3),
#button3:focus~#content div:nth-child(4),
#button4:focus~#content div:nth-child(5) {display:block;}
#content {
width:940px;
height:307px;
color:black;
font-size:10px;
text-align:center;
margin:20px auto;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
overflow:hidden;
background:red;
}
.caption {
background:blue;
width:200px;
margin:auto;
height:60px;
background:#694264;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
transition:all .3s ease-out;
left:0;
font-size:14px;
padding:10px;
}
#content:hover .caption {
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
#faq,#her,#and,#enj {display:none;}
#faq:hover{
background:red;
}
<section class="top" data-type="background" data-speed="10" class="pages">
<section id="w">
<div class="title">My Work</div>
<div id="workSamples">
<a id="button1" href="#" tabindex="1"><div class="b1"><img src="Images/work/sample01.jpg" alt=""></div></a>
<a id="button2" href="#" tabindex="2"><div class="b1"><img src="Images/work/sample02.jpg"></div></a>
<a id="button3" href="#" tabindex="3"><div class="b1"><img src="Images/work/sample03.jpg"></div></a>
<div id="content">
<div id="def">This is where I put the default information. No clicks needed </div>
<div id="faq"><img src="Images/absolutebeauty.jpg">
<div class="caption">
<a href="http://www.absolutebeauty.ie">
<h4>Absolute Beauty</h4><br>Visit the site</a>
</div>
</div>
<div id="her"><img src="Images/bestacoustic.jpg"></div>
<div id="and"><img src="Images/engagement.jpg"></div>
</div>
</div>
</section>
</section>
該代碼本身運行良好,但是當我將其添加到我的網站時,當我單擊第一個圖像鏈接時,它現在使我回到頁面頂部。
這是我的網站: http : //www.liddily.com
單擊“工作”,然后單擊任何圖像,您將明白我的意思。
我不知道為什么會這樣。 有人可以幫我嗎?
謝謝閱讀!
您已將鏈接設置為轉到不存在的錨,因此它會返回頁面本身。 <a href="#">Return</a>
將這些鏈接鏈接到實際位置,“刷新”效果將停止。
請注意,在該站點上的示例中,它顯示了以下代碼,其代碼位於井號#
:
<div id="button1"><a href="#FAQ"><img src="http://img62.imageshack.us/img62/3523/p42e.png"></a></div>
<div id="button2"><a href="#Her"><img src="http://img16.imageshack.us/img16/3742/lnam.png"></a></div>
<div id="button3"><a href="#And"><img src="http://img829.imageshack.us/img829/2347/kflq.png"></a></div>
<div id="button4"><a href="#Enjoy"><img src="http://img24.imageshack.us/img24/5111/zv9.png"></a></div>
<div id="content"> This is where I put the default information. No clicks needed </div
<a name="FAQ">
<div style="border: 1px dashed black;width: 300px;height:500px;position:fixed;left:750px;top:150px;}
FAQ content will go here.
然后,該示例顯示了鏈接要前往的命名位置。 您需要實現此格式才能正常工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.