html + css + js комбинация не работает корректно в браузерах Google Chrome или Safari

-1

Отказ от ответственности. Это вопрос из учебника jQuery по кодированию python.html + css + js комбинация не работает корректно в браузерах Google Chrome или Safari

У меня есть следующий простой HTML структуры (имя файла: index.html):

<!DOCTYPE html> 
<html> 
    <head> 
     <title>astrobox.io | Welcome!</title> 
     <script type="text/javascript" src="/Users/iMacHome/astroboxio/script.js"></script> 
     <link rel="stylesheet" type="text/css" href="/Users/iMacHome/astroboxio/stylesheet.css"></link> 
    </head> 
    <body> 
     <div class="panel"> 
      <br /> 
      <br /> 
      <p>Welcome!</p> 
     </div> 
     <p class="slide"><div class="pull-me">astrobox.io</div></p> 
    </body> 
</html>

Это ссылка на следующий .js скрипт (имя файла: script.js):

$(document).ready(function() { 
    $('.pull-me').click(function(){ 
     $('.panel').slideToggle('slow') 
    }); 
});

И просто для полноты картины, вот мой .css файл (имя файла: stylesheet.css):

body { 
    margin:0 auto; 
    padding:0; 
    width:800px; 
    text-align:center; 
} 

.pull-me{ 
    -webkit-box-shadow: 0 0 8px #562cd4; 
    -moz-box-shadow: 0 0 10px #562cd4; 
    box-shadow: 0 0 10px #562cd4; 
    cursor:pointer; 
} 
.panel { 
    background: #000000; 
    background-size:90% 90%; 
    height:380px; 
    display:none; 
    color:#ffffff; 
    font-family:basic,arial,sans-serif; 
} 
.panel p{ 
    text-align:center; 
} 
.slide { 
    margin:0; 
    padding:0; 
    border-top:solid 2px #562cd4; 
} 
.pull-me { 
    display:block; 
    position:relative; 
    right:-25px; 
    width:150px; 
    height:20px; 
    font-family:basic,arial,sans-serif; 
    font-size:14px; 
    color:#ffffff; 
    background:#562cd4; 
    text-decoration:none; 
    -moz-border-bottom-left-radius:5px; 
    -moz-border-bottom-right-radius:5px; 
    border-bottom-left-radius:5px; 
    border-bottom-right-radius:5px; 
} 
.pull-me p { 
    text-align:center; 
}

Теперь у меня есть все три этих ЮКЖД ips все в одном каталоге и при открытии файла index.html в сафари и Google хром функция переключения не работает. Он работал над тестированием ...

Может кто-нибудь, возможно, пролить свет на то, почему это может произойти. Еще лучше, если вы обнаружите проблему или почему она не работает, это будет отлично.

источник

2015-02-22 Michael Roberts

Похоже, вы забыли включить JQuery – j08691

Ах да, в моей среде разработки эта библиотека уже установлена. Я попробую это! –

Со всеми предлагаемыми исправлениями он по-прежнему не загружается локально в моих браузерах Safari или Google Chrome ... –

Убедитесь, что вы добавили jquery или у вас есть правильный порядок скриптов (сначала jquery, затем ваши скрипты). , например:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="/Users/iMacHome/astroboxio/script.js"></script>

Если вы забыли включить Jquery скрипты или библиотеки с помощью JQuery не будет работать

источник

2015-02-22 21:52:34

Отметьте это как принято, если это вам помогло –

Привет, Manos, я включил это, как вы говорите, однако он все еще не работает. Не могли бы вы протестировать его на своей машине локально? –

@MichaelRoberts Проверьте это: http://jsfiddle.net/tqwL0bs6/ –

Это не представляется возможным точно сказать, почему он не работает - но я бы поставил мой доллар, это отсутствие запятой в этой строке:

~~$('.panel').slideToggle('slow')~~

~~Попробуйте проверить консоль на наличие ошибок.~~

EDIT:

Похоже, что вы забыли включить JQuery. Добавьте скрипт в ваш <head>, прежде чем ваш Jquery зависимого скрипт (ы):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

источник

2015-02-22 21:50:43 Bill

Downvoters ..пожалуйста, предложите улучшения или объясните, что вы считаете неправильным с моим ответом? – Bill

Попробуем это, консоль выдает 0 ошибок. Только одно предупреждение в css –

Вот хорошее объяснение, когда они не являются обязательными: http://www.codecademy.com/blog/78-your-guide-to-semicolons-in-javascript – j08691

Вам не нужно предоставлять полные пути к файлам, но вам необходимо включить JQuery первого

Изменить эту часть:

<head> 
    <title>astrobox.io | Welcome!</title> 
    <script type="text/javascript" src="/Users/iMacHome/astroboxio/script.js"></script> 
    <link rel="stylesheet" type="text/css" href="/Users/iMacHome/astroboxio/stylesheet.css"></link> 
</head>

<head> 
    <title>astrobox.io | Welcome!</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"></link> 
</head>

Я добавил КДС Google, но вы также можете включите jquery, связавшись с вашей локальной копией.

источник

2015-02-22 21:51:47 baao

Я пробовал как сокращенные, так и полные версии. Мне нужно каким-то образом загрузить jQuery в файл index.html? –

Да, вы делаете, @MichaelRoberts Я добавил ссылку на google cdn – baao

html + css + js комбинация не работает корректно в браузерах Google Chrome или Safari

ответ

Смежные вопросы