0
我目前正在建設一個編碼學校申請一個單頁的網站。我快到了,但自從昨天以來,我放入HTML代碼的外部超文本鏈接將無法工作。直到那時它工作得很好,現在你不能點擊它們。我看不出代碼是錯誤的。爲什麼我的錨不工作了
內部錨(導航欄項目要到頁面的不同部分)的工作不錯,但我有指向其他網站的外部鏈接的麻煩。主播是非政府組織的形象(世界自然基金會,海洋牧羊人,綠色和平組織)。我曾經可以從那裏去他們的網站。
任何幫助將是非常歡迎的,因爲該項目是由於在3月12日! 非常感謝大家!
段:
$(document).ready(function() {
$('.js-scrollTo').on('click', function() {
var page = $(this).attr('href');
var speed = 750;
$('html, body').animate({
scrollTop: $(page).offset().top
}, speed);
return false;
});
});
$(document).ready(function() {
$('body').append('<a href="#top" class="top_link" title="Revenir en haut de page">Haut</a>');
});
$('.top_link').css({
'position': 'fixed',
'right': '20px',
'bottom': '50px',
'display': 'none',
'padding': '20px',
'background': '#fff',
'-moz-border-radius': '40px',
'-webkit-border-radius': '40px',
'border-radius': '40px',
'opacity': '0.9',
'z-index': '2000'
});
$(window).scroll(function() {
posScroll = $(document).scrollTop();
if (posScroll >= 550)
$('.top_link').fadeIn(600);
else
$('.top_link').fadeOut(600);
});
@font-face {
font-family: 'Old Standard TT';
src: url(OldStandard-Regular.ttf);
}
@font-face {
font-family: 'Bahiana-Regular';
src: url(Bahiana-Regular.otf);
}
header {
background-image: url("http://imageshack.com/a/img924/6688/ocZGBh.jpg");
background-size: cover;
min-height: 515px;
background-repeat: no-repeat;
background-position: center;
padding-top: 70px;
margin: auto;
}
nav {
width: 100%;
position: fixed;
height: 100%;
}
nav ul {
width: inherit;
display: table;
margin-top: 0px;
background-color: white;
float: left;
margin: 100%, auto;
}
nav ul li {
display: table-cell;
width: 16%;
}
ul li a {
display: block;
text-align: center;
color: rgba(0, 0, 0, .7);
text-decoration: none;
padding: 8px 8px 17px 8px;
font-family: 'Bahiana';
font-size: 25px;
}
body {
background-color: #DFDFDD;
margin: 0px;
}
h1 {
font-family: 'Old Standard TT', serif;
font-size: 25px;
color: #9e9c9c;
text-align: center;
margin-top: 15px;
}
h2 {
font-family: 'Old Standard TT', serif;
font-size: 30px;
color: #77D9D2;
text-align: center;
margin-left: 300px;
margin-right: 300px;
}
h3 {
font-family: "Old Standard TT", serif;
font-size: 20px;
color: #77D9D2;
}
section {
margin-top: 100px;
margin-bottom: 200px;
}
.pres,
.his,
.support {
text-align: center;
margin-left: 300px;
margin-right: 300px;
font-size: 20px;
color: #9e9c9c;
font-family: "Helvetica", sans-serif;
}
.pres-large {
font-family: 'Old Standard TT', serif;
font-size: 25px;
color: #77D9D2;
}
.des {
padding: 10px;
font-size: 15px;
font-family: "Helvetica", sans-serif;
text-align: justify;
color: #5F6C70;
}
.row {
display: flex;
margin: 60px 0;
text-align: center;
}
.card {
background-color: white;
width: 80%;
height: 800px;
margin-top: 25px;
margin-bottom: 25px;
}
.card.card-left {
margin: 0 5% 0 15%;
}
.card.card-right {
margin: 0 15% 0 5%;
}
.photo {
width: 100%;
}
#his {
clear: both;
}
table {
margin: auto;
}
table,
th,
td {
border-style: hidden;
text-align: center;
font-size: 20px;
font-family: 'Bahiana', Helvetica, sans-serif;
color: #9e9c9c;
width: 80%;
table-layout: fixed;
}
td {
width: 100px;
}
.tickets {
color: #77D9D2;
}
#gp {
float: left;
width: 200px;
margin-top: 20px;
}
#ssh {
float: right;
width: 200px;
margin-top: 15px;
}
#wwf {
width: 200px;
margin-left: 50px;
}
.press {
font-size: 25px;
font-family: "Old Standard TT";
color: #5F6C70;
text-align: center;
margin-left: 300px;
margin-right: 300px;
}
.separation {
display: block;
margin-left: auto;
margin-right: auto;
}
footer {
font-family: "Bahiana";
text-align: center;
font-size: 30px;
color: rgba(0, 0, 0, .7);
background-color: white;
margin-bottom: 10px;
padding-bottom: 0px;
}
<body>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<nav>
<ul>
<li id="nav-what"> <a class="js-scrollTo" href="#what">What is the Wild Circus</a></li>
<li id="nav-how"> <a class="js-scrollTo" href="#how">How does that work</a></li>
<li id="nav-history"> <a class="js-scrollTo" href="#his">History</a></li>
<li id="nav-tour"> <a class="js-scrollTo" href="#tour">Tour Dates</a></li>
<li id="nav-support"> <a class="js-scrollTo" href="#support">Support</a></li>
<li id="nav-press"> <a class="js-scrollTo" href="#press">Press</a></li>
</ul>
</nav>
<header>
<h1>
<img src="http://imageshack.com/a/img922/8683/f9lHHB.png"> <br>
Welcome to the most Amazing and Grandiloquent Sock Puppet show !!
</h1>
</header>
<section id="what">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>WHAT IS THE WILD CIRCUS?</h2>
<div class="pres">
<p>Did you know that because of Climate changing, the northpole ice floe is melting away a bit more every year and it gives polar bears a hard time to find food? <br>
<br>
Did you know that because of deforestation, Apes don’t know where to live anymore ? <br>
<br>
Times are quite hard for our furry friends, right now…But don’t feel sorry or helpless, there’s still a lot of stuff we can do to help them out !
</p>
<p class="pres-large">Oscar the Polar Bear, Maurice the Orang-utan, Freddy the Sloth and many more of their friends are waiting for you to show you where and how they live and why it’s important to keep them in their natural habitat. They will show you all the things you can do to help ! <br>
The wild Circus is an educationnal and entertaining way to discover some of the most endangered species of our world. Especially designed for kids, our shows bring you Orcas, Tucans, Polar Bears, Orangutans, sea turtles in their true environnement so you can discover how they live, why they are in danger and how to protect them. <br>
Through multiple funny and witty playlets, kids will learn facts and tips about wildlife and its preservation. We aim to bring knowledge and good times altogether. It’s a wonderful way to learn and have fun !
</p>
</div>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="how">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>HOW DOES IS WORK?</h2>
<div class="pres">
<p>The show is divided in several playlets. Each playlet covers a certain habitat, with multiple animals, each of them with a strong personnality the Kids will simply fall in love with them ! <br>
Every single animal is made of a giant sock and accessories and animated by one of our awesome puppet masters <br>
At the end of the show, kids will be able to meet them in person and ask any questions they want
</p>
</div>
<div class="row">
<div id="jungle" class="card card-left">
<h3>Welcome to the Jungle</h3>
<img class="photo" src="http://imageshack.com/a/img922/6589/OIQIpr.jpg">
<p class="des">Maurice the Orang-Utan, Stanley the Rhino and Krisha the Tigress are taking you to Sumatra Island. You will discover a beautiful, deep forest : the jungle. It’s currently dying from deforestation and so, all those gorgeous animals are losing their home. Let’s see what solution we can find to protect them</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
<div id="sea" class="card card-right">
<h3>Twenty thousands Leagues under the Sea</h3>
<img class="photo" src="http://imageshack.com/a/img921/111/Zr6ZHn.jpg">
<p class="des">Have you ever seen the clear waters of the great barrier reef, off the coast of Australia? Like in Pixar’s Finding Nemo, it’s a very colourful world with sea turtles, clownfishs, starfishs and corals. But overfishing and climate change are a threat to this paradise. On our trip to the Coral Triangle, we’ll meet Rita the Turtle, Cabo the clowfish and loads and loads of other fantastic creatures, so they can tell their story.</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
</div>
<div class="row">
<div id="santa" class="card card-left">
<h3>The Land of Santa</h3>
<img class="photo" src="http://imageshack.com/a/img924/1781/6fNY6c.jpg">
<p class="des">Temperatures in the Arctic are rising twice as fast as in the rest of the planet! When the ice melts, the sea level rises and polar bears like Oscar are having trouble finding food and a home. Plus, the pollution of waters by shipping traffic and drilling for petrol in this area is dramatically harmful for plankton, which is the basic food of tons of different sea creatures, like Bella the gigantic humpback whale. Santa’s not too happy about it and might even come and give us a hand to save those majestic mammals !</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
<div id="lung" class="card card-right">
<h3>The Lungs of the Planet</h3>
<img class="photo" src="http://imageshack.com/a/img922/1086/2ceBcx.jpg">
<p class="des">Last stop of our trip, but not least : The Amazon. The Amazon is the most gigantic, dense tropical forest called the Lung of the planet. It’s the home of one in ten known species on earth but also of many unnumbered undiscovered species of insects, monkeys, exotic birds. The Amazon is also the biggest victim of deforestation today and it is literally dying. And every animal even so tiny living there is dying with it. There is a clear link between the health of the Amazon and the health of the rest of the planet.<br>
The Amazon is gonna be our biggest stop cause there’s so much to see, so much to do. It is critical to preserve the tropical forest so we can promise a brighter future for Alvin the Spider Monkey, Freddy the Sloth, Mara the Tucan but also for every single living being on this planet, including you !<br>
Come on then, we’re waiting for you !!!
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
</div>
</section>
<section id="his">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>HISTORY</h2>
<p class="his">The story of the Wild Circus begins in 2006 when Elena Woodward, a Oregon kindergarden teacher started discussing environnement issues with her class of 3 and 4 years olds. The kids reacted strongly, fully understanding and feeling the injustice of our world toward the wildlife. Elena resented the fact that somehow, the kids are the fiercest defenders of nature but most of the time they just don’t know what’s happening to it. With her brother Ethan, she had this crazy idea to create a place where Kids could learn about wild animals and their preservation in an educationnal and entertaining way. They wanted something clever but simple and fun. Their love of socks did the rest. And so was born the Wild Circus.
They started performing in schools in Oregon but then it just caught on fire, becoming this huge success we now know ! After touring the US and Canada in 2016, The Wild Circus is now coming to Europe to share their knowledge and good spirits !
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="tour">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>TOUR DATES</h2>
<table>
<tr>
<td>April 16</td>
<td>Birmingham</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 17</td>
<td>London</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 20</td>
<td>Glasgow</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 21</td>
<td>Dublin</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 24</td>
<td>Paris</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 26</td>
<td>Amsterdam</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 27</td>
<td>Copenhagen</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 29</td>
<td>Stockholm</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 31</td>
<td>Berlin</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 2</td>
<td>Frankfurt</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 3</td>
<td>Milano</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 4</td>
<td>Prague</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 5</td>
<td>Vienna</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 7</td>
<td>Madrid</td>
<td class="tickets">Get Tickets</td>
</tr>
</table>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="support">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>THEY SUPPORT US, WE SUPPORT THEM!</h2>
<p class="support">
There's a lot of NGO that help preserving wildlife on an everyday basis. We love them and we know how important and crucial their job is. 10% of the tickets fare is going to them so they keep going protecting what's most treasurable on earth! Don't hesitate to support them too! You can meet them at the end of the show as they tour with us most of the time. If you want to donate or learn more about them and their work, here's their website links:<br>
<a href="http://www.greenpeace.org/international/en/"><img src="https://cupom.com/wp-content/uploads/sites/12/2012/12/greenpeace-logo-e1356599879308.jpeg" id="gp"></a> <br>
<a href="http://www.seashepherd.org/"><img src="https://totallyvegan.files.wordpress.com/2011/02/sea_shepherd.jpg" id="ssh"> </a> <br>
<a href="https://www.worldwildlife.org/"><img src="http://logok.org/wp-content/uploads/2014/08/WWF_logo-1024x768.png" id="wwf"></a> <br>
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="press">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>PRESS</h2>
<p class="press">
"If you haven't seen this already, rush before it's too late. It's clever, witty and hilarious!" <i>-The independent-</i><br>
"Nature is calling for help in the smartest kid show to date. Go for it and bring your kids, siblings, nephews... The planet thanks you" <i>-Vanity Fair-</i><br>
"Best. Show. Ever!!!" <i>-The New York Times-</i><br>
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<footer>
<p>Eh! Wanna play a fun game while waiting to see the show? Go and check out <a href="http://www.robozzle.com/user.aspx?name=aaanoushka"> Robozzle </a></p>
</footer>
</body>
尋求調試幫助的問題(「**爲什麼不是這個代碼工作?」)必須包括 所期望的行爲,特定問題或錯誤並且重現它必要 最短代碼**在問題本身**。沒有明確問題 聲明**的問題對其他讀者無用。請參閱:[如何創建最小,完成和可驗證示例](http://stackoverflow.com/help/mcve)。 – j08691
右鍵點擊不工作,選擇「檢查元素」中的鏈接。它會顯示鏈接頂部的元素。 – JJJ
_「工作完全正常,直到隨後」 _嗯,你是怎麼改變?這就是造成這個問題的原因... –