0
我一直在編碼一個月，所以對不起，如果這有一個簡單的答案，但我一直在尋找沒有結果的日子。爲什麼我的Bootstrap輪播或jQuery代碼在Safari中不起作用？
我已經建立了一個簡單的練習網頁，使用Bootstrap旋轉木馬作爲頁面背景和jQuery來使div（頁面內容最終會出現）出現。當我在Chrome，Firefox和Opera中打開HTML文件時，頁面可以正常工作，但是當在iPhone或iPad上的Safari中打開該文件時，指向div的鏈接不起作用（單擊時不顯示任何內容）以及Carousel根本不起作用，而是在頁面下方出現四個單獨的圖像，並在頁面底部顯示簡單的「上一頁」和「下一頁」鏈接。不幸的是，我無法測試桌面版Safari瀏覽器的頁面。我覺得有一些簡單的我很想念，但我無法弄清楚。提前致謝。下面是我的網站（CSS，HTML和jQuery）整個代碼，這裏是頁面的的jsfiddle：https://jsfiddle.net/fh8pxqqt/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="icon" type="image/png" href="http://res.cloudinary.com/jamesddavies/image/upload/v1469359895/strohl_logo_bod9yw.png"/>
<title>Alex Strohl</title>
<style>
#bg-wrapper {
position: relative;
}
/*Carousel Background*/
#carousel-bg {
width: 100%;
height: 100%;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
height: 100vh;
overflow: hidden;
object-fit: cover;
-webkit-object-fit: cover;
-o-object-fit: cover;
-moz-object-fit: cover;
}
/*Nav*/
nav {
}
ul {
height: 75px;
line-height: 50px;
background: rgba(255,255,255,0.4);
text-align: left;
padding: 10px;
z-index: 1;
position: absolute;
width: 100%;
}
ul:hover {
background: rgba(255,255,255,1);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-moz-transition: 500ms;
}
ul:not(:hover) {
background: rgba(255,255,255,0.4);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-moz-transition: 500ms;
}
ul img {
padding-right: 30px;
padding-left: 30px;
}
ul img:hover {
opacity: 0.5;
filter:Alpha(opacity=50);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
ul img:not(:hover) {
opacity: 1;
filter:Alpha(opacity=50);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
li {
color: rgba(0,0,0,1);
text-decoration: none;
}
.link:focus {
color: rgba(0,0,0,0.5);
text-decoration: none;
}
.link:hover {
text-decoration: none;
color: rgba(0,0,0,0.5);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
cursor: pointer;
}
.link:not(:hover) {
color: rgba(0,0,0,1);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
.link:click {
color: rgba(0,0,0,0.5);
}
li {
display: inline;
vertical-align: middle;
line-height: normal;
padding: 10px;
z-index: 1;
}
li img {
height: 50px;
width: auto;
}
/*adventures*/
#adventures-wrapper {
text-align: center;
}
.adventures {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*commissions*/
#commissions-wrapper {
text-align: center;
}
.commissions {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*book*/
#book-wrapper {
text-align: center;
}
.book {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*alex*/
#alex-wrapper {
text-align: center;
}
.alex {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*contact*/
#contact-wrapper {
text-align: center;
}
.contact {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*responsive design*/
@media (max-width: 1000px){
ul {
text-align: center;
}
}
</style>
</head>
<body>
<div id="bg-wrapper">
<!--Navbar-->
<div class="nav">
<ul>
<li><img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469359895/strohl_logo_bod9yw.png"></li>
<li class="link adventures-link">Adventures</li>
<li class="link commissions-link">Commissions</li>
<li class="link book-link">Book</li>
<li class="link alex-link">Alex</li>
<li class="link contact-link">Contact</li>
</ul>
</div>
<!--Adventures-->
<div id="adventures-wrapper">
<div class="adventures">
<h1>Adventures</h1>
</div>
</div>
<!--Commissions-->
<div id="commissions-wrapper">
<div class="commissions">
<h1>Commissions</h1>
</div>
</div>
<!--Book-->
<div id="book-wrapper">
<div class="book">
<h1>Book</h1>
</div>
</div>
<!--Alex-->
<div id="alex-wrapper">
<div class="alex">
<h1>Alex</h1>
</div>
</div>
<!--Contact-->
<div id="contact-wrapper">
<div class="contact">
<h1>Contact</h1>
</div>
</div>
<!--Carousel background-->
<div id="carousel-bg" class="carousel slide" data-ride="carousel" data-pause="false">
<!--Indicators-->
<ol class="carousel-indicators hidden">
<li data-target="#carousel-bg" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-bg" data-slide-to="1"></li>
<li data-target="#carousel-bg" data-slide-to="2"></li>
<li data-target="#carousel-bg" data-slide-to="3"></li>
</ol>
<!--Wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264082/STROHL__MG_1150-Edit_wdcn2g.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264097/_ST_3667_ob8jtb.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264105/_ST_4081_yb2vdd.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264128/_ST_9411_h9ftou.jpg">
</div>
</div>
<!--Left and Right controls-->
<a class="left carousel-control hidden" href="#carousel-bg" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control hidden" href="#carousel-bg" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
/*Link functionality*/
$(document).ready(function(){
$("#carousel-bg").click(function(){
$(".adventures, .commissions, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".adventures-link").click(function(){
$(".adventures").toggle(500);
$(".commissions, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".commissions-link").click(function(){
$(".commissions").toggle(500);
$(".adventures, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".book-link").click(function(){
$(".book").toggle(500);
$(".adventures, .commissions, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".alex-link").click(function(){
$(".alex").toggle(500);
$(".adventures, .commissions, .book, .contact").hide(500);
});
});
$(document).ready(function(){
$(".contact-link").click(function(){
$(".contact").toggle(500);
$(".adventures, .commissions, .book, .alex").hide(500);
});
});
</script>
</body>
能否請您創建一個[的jsfiddle（https://jsfiddle.net/）？ –
嗨 - 這是jsFiddle。我也將它添加到主帖子中。 - https://jsfiddle.net/fh8pxqqt/ – JamesDDavies
這並不完全清楚你需要誠實的問題，也許圖像會有所幫助。您的上一個和下一個箭頭不可見，因爲您向他們應用了「隱藏」;請參閱響應式[公用程序]（https://getbootstrap.com/css/#responsive-utilities-classes），以下是[iPhone]（https://imgur.com/a/6Rh3q）的兩個屏幕截圖。另外，請務必檢查您的控制檯是否有任何錯誤。 – vanburen