You необходимо правильно организовать и структурировать свой HTML-код. Проблема в том, что ваши микширование и включая скрипты, стили повсеместно. Порядок очень важен.
The Javascript ошибки $ is not a function
потому, что вы используете jQuery.noConflict();
так вместо того, чтобы делать:
$(function() {
$('[data-rspnsv]').rspnsv({
delay: 200,
duration: 3000
});
});
изменить его (заменить $
с jQuery
)
jQuery(function() {
jQuery('[data-rspnsv]').rspnsv({
delay: 200,
duration: 3000
});
});
Или
jQuery(...).slabText is not a function
Что касается как я вижу, вы объявляете функцию jQuery("h1.slabbed").slabText({..})
с с добавлением предварительной ссылки на плагин. И так далее .. Я бы также рекомендовал не включать в свой встроенный JavaScript и рассмотреть вопрос об организации свои функции следующим образом:
var $Slabbed = jQuery("h1.slabbed"),
$Carouselitem = jQuery(".carousel");
window.myApp = {
SlabText : function(){
if($Slabbed.length > 0){
$Slabbed.slabText({
viewportBreakpoint: 380,
minCharsPerLine: 10
});
}
},
Carousel: function(){
if($Carouselitem.length > 0){
$Carouselitem.carousel({
interval: 15e3,
pause: "hover"
});
}
},
Init : function(){
// Init SlabText
myApp.SlabText();
// Init Carousel
myApp.Carousel();
}
};
jQuery(document).ready(function() {
myApp.init();
});
Что касается вашей navbar
, у меня не было проблем, воспроизводя свой example.However, я вижу три bootstrap.min.css
файлов - Что есть что ??
попробовать это в разделе & <head></head>
добавить только ваш CSS и сохранить JS для последующего
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/vendor.css"/>
<link rel="stylesheet" href="css/template-styles.css"/>
<link rel="stylesheet" href="css/custom.css"/>
bootstrap.min.css
- Оставьте самозагрузки, как это сейчас, чтобы избежать портя стилей по умолчанию.Как только вы получите достаточно зрелыми, вы можете настроить его столько, сколько вы хотите
vendor.css
- Плагины/Производители
template-styles.css
- стили вашего шаблона
custom.css
- Ваш собственный пользовательский стайлинга
Тогда перед вашим закрытием <body>
теги добавьте JS и назовите ваш App.init();
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script type="text/javascript" src="js/jquery-noconflict.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
});
</script>
</body>
Демо-версияJSFiddle - попробуйте изменить размер браузера
Пожалуйста, не делайте копирования/вставки, так как эта демонстрация не является решением проблемы. Я загружаю библиотеку bootstrap из CDN и добавляю ваши собственные стили, которые также содержат стили по умолчанию для начальной загрузки. Это беспорядок. Вам нужно очистить все ваши стили, как упоминалось ранее! это просто доказательство концепции, что ваша navbar
разметка верна & работает так, как предполагается.
Привет, я думаю, ваша разметка в порядке, вот рабочая демонстрация (https://jsfiddle.net/t4ym3/101/embedded/result/). Тем не менее, я могу видеть некоторые ошибки JavaScript, уметь фиксировать это и возвращаться к нам, если проблема не решена? –
thankxs raja. Я посмотрел на javascript и нашел некоторые сообщения об ошибках в моей консоли веб-разработки. Проблема в том, что я ничего не знаю о javascript и/или jQuery. Поэтому, если кто-нибудь может отладить это, пожалуйста, помогите. –
уверен, что я могу попробовать .. –