你需要正確地組織和構建HTML。問題在於你的混音和包括腳本,樣式到處都是。順序非常重要。
的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 - 嘗試重新調整瀏覽器大小
請不要複製/粘貼編程,因爲此演示不是您的問題的解決方案。我從CDN加載引導程序庫並添加了也包含引導程序默認樣式的自定義樣式。這是一團糟。你需要清理前面提到的所有樣式!這只是一個概念證明,您的navbar
標記正確&正常工作。
您好,我想您的標記是好的,這裏是一個工作演示(https://jsfiddle.net/t4ym3/101/embedded/result/)。但是,我可以看到一些JavaScript錯誤,解決這個問題,如果問題沒有解決,回到我們身邊? –
thankxs raja。我查看了JavaScript,並在我的Web開發控制檯中發現了一些錯誤消息。問題是:我對JavaScript和/或jQuery一無所知。所以,如果任何人都可以調試,請幫助。 –
當然我可以試試.. –