为什么我的Bootstrap轮播或jQuery代码不能在Safari中运行？

时间：2016-07-27 13:18:00

标签： jquery twitter-bootstrap safari mobile-safari bootstrap-carousel

我已经编了一个月了很抱歉，如果这个答案很简单，但我一直在寻找没有结果的日子。

我使用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>

1 个答案:

答案 0 :(得分：0)

您是否尝试在iphone Chrome浏览器中打开网站？当你在移动设备上打开html文件时，我认为你没有加载你的javascript文件。您的代码正在使用safari。我测试了它。

在移动浏览器中打开以下链接。看它是否有效。

https://output.jsbin.com/cugawimabo

相关问题
最新问题