我正在创建一个在Twitter Bootstrap框架中运行的网站。我正在努力的最终结果是一个在页面之间具有移动滑动功能的网站。为了实现这一点，我在Bootstrap轮播中创建了“页面”，并且还使用jquery mobile来启用滑动。我使用此示例中的javascript - http://jsfiddle.net/64qK2/ - 在我的导航中创建链接。
我遇到的问题是在脚本中..当我将此代码放入我的CMS，Drupal时，我的导航不会生成链接。当我保存生成的页面源并从另一个主机（在任何CMS之外）运行该文件时，或者当我从本地系统运行该文件时，所有内容都会生成并完美运行。我对CMS的访问权限有限，这意味着我无法从严格更改doctype或将任何数据添加到头部。
所以，我的问题是：为什么会发生这种情况？生成的页面源位于下方（减去Omniture的页面分析代码）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Test</title>
</head>
<body>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Styles -->
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" />
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px;
color: #5a5a5a;
color: #fff;
background-color:#96232d;
background:#96232d;
font-family: "PT Sans";
}
h1, h2, h3{font-style: italic}
.red_gradient {
background: #ce4d4a; /* Old browsers */
background: -moz-linear-gradient(top, #ce4d4a 0%, #96232d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ce4d4a), color-stop(100%,#96232d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ce4d4a 0%,#96232d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ce4d4a 0%,#96232d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ce4d4a 0%,#96232d 100%); /* IE10+ */
background: linear-gradient(to bottom, #ce4d4a 0%,#96232d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce4d4a', endColorstr='#96232d',GradientType=0 ); /* IE6-9 */
position: relative;
}
.btn-renew {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
background-color: #006dcc;
*background-color: #ce4d4a;
background-image: -moz-linear-gradient(top, #ce4d4a, #96232d);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ce4d4a), to(#96232d));
background-image: -webkit-linear-gradient(top, #ce4d4a, #96232d);
background-image: -o-linear-gradient(top, #ce4d4a, #96232d);
background-image: linear-gradient(to bottom, #ce4d4a, #96232d);
background-repeat: repeat-x;
border-color: #96232d;
padding-left: 50px;
padding-right: 50px;
}
.btn-renew:hover,
.btn-renew:active,
.btn-renew.active,
.btn-renew.disabled,
.btn-renew[disabled] {
color: #ffffff;
background-color: #96232d;
*background-color: #ce4d4a;
}
.btn-renew:active,
.btn-renew.active {
background-color: #ce4d4a;
}
.text_center{text-align: center; background}
.green_stripe {height: 10px; background-color: #004e26; border-top: 2px solid #fff; border-bottom: 2px solid #fff; margin-bottom: 30px; width: 100%;}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
.navbar-wrapper .navbar {
}
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
border: 0;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
box-shadow: 0 2px 10px rgba(0,0,0,.25);
background: rgba(255,255,255,.4);
}
/* Downsize the brand/project name a bit */
.navbar .brand {
padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
/* Navbar links: increase padding for taller navbar */
.navbar .nav > li > a {
padding: 15px 20px;
font-size: 18px;
font-family: 'Oswald';
letter-spacing: 1px;
font-weight: 300;
}
/* Offset the responsive button for proper vertical alignment */
.navbar .btn-navbar {
margin-top: 10px;
margin-bottom: 10px;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 0px;
}
.carousel .container {
position: relative;
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
}
.carousel .item .container.header{
height: 600px;
}
.carousel img.header_image {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 600px;
opacity: 1;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
border-radius: 0;
margin: -20px 0;
}
.carousel .item .container.header{
height: 600px;
}
.carousel img.header_image {
height: auto;
}
.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}
@media (max-width: 767px) {
.navbar-inner {
margin: -20px auto;
padding: auto 0;
}
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {
}
.carousel .item .container.header{
height: auto;
min-height: 400px;
}
.carousel img.header_image {
height: auto;
max-height: auto;
min-height: auto;
min-width: 600px
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}
.marketing .span4 + .span4 {
margin-top: 40px;
}
.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}
.btn-renew {
padding-left: 20px;
padding-right: 20px;
}
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css' />
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png" />
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
<!-- Carousel
================================================== -->
<div id="headerCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" data-title="Home">
<img class="header_image" src="http://wallpaperspoint.net/wp-content/walls/9_landscape_wallpaper_03/autumn-forest-landscape-wallpaper.jpg" alt="" />
<div class="container header">
<div class="carousel-caption">
<h1>  Text Text, <br /> Text Text<br />Text Text...</h1>
<!--<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>-->
</div>
</div>
<div class="red_gradient">
<div class="row-fluid green_stripe"></div>
<div class="container">
<div class="row-fluid">
<div class="span6">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, maiores ornare ac fermentum, imperdiet ut vivamus a, nam lectus at nunc. Quam euismod sem, semper ut potenti pellentesque quisque. In eget sapien sed, sit duis vestibulum ultricies, placerat morbi amet vel, nullam in in lorem vel. In molestie elit dui dictum, praesent nascetur pulvinar sed, in dolor pede in aliquam, risus nec error quis pharetra. Eros metus quam augue suspendisse, metus rutrum risus erat in. In ultrices quo ut lectus, etiam vestibulum urna a est, pretium luctus euismod nisl, pellentesque turpis hac ridiculus massa. Venenatis a taciti dolor platea, curabitur lorem platea urna odio, convallis sit pellentesque lacus proin. Et ipsum velit diam nulla, fringilla vel tincidunt vitae, elit turpis tellus vivamus, dictum adipiscing convallis magna id. Viverra eu amet sit, dignissim tincidunt volutpat nulla tincidunt, feugiat est erat dui tempor, fusce tortor auctor vestibulum. Venenatis praesent risus orci, ante nam volutpat erat. Cursus non mollis interdum maecenas, consequat imperdiet penatibus enim, tristique luctus tellus eos accumsan, ridiculus erat laoreet nunc.</p>
</div>
</div>
</div>
</div>
</div>
<div class="item" data-title="Page 2">
<img class="header_image" src="http://wallpaperspoint.net/wp-content/walls/9_landscape_wallpaper_03/autumn-forest-landscape-wallpaper.jpg" alt="" />
<div class="container header">
<div class="carousel-caption">
<h1>  Text Text, <br /> Text Text<br />Text Text...</h1>
<!--<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>-->
</div>
</div>
<div class="red_gradient">
<div class="row-fluid green_stripe"></div>
<div class="container">
<div class="row-fluid">
<div class="span6">
<h1>Page 2</h1>
<p>Lorem ipsum dolor sit amet, maiores ornare ac fermentum, imperdiet ut vivamus a, nam lectus at nunc. Quam euismod sem, semper ut potenti pellentesque quisque. In eget sapien sed, sit duis vestibulum ultricies, placerat morbi amet vel, nullam in in lorem vel. In molestie elit dui dictum, praesent nascetur pulvinar sed, in dolor pede in aliquam, risus nec error quis pharetra. Eros metus quam augue suspendisse, metus rutrum risus erat in. In ultrices quo ut lectus, etiam vestibulum urna a est, pretium luctus euismod nisl, pellentesque turpis hac ridiculus massa. Venenatis a taciti dolor platea, curabitur lorem platea urna odio, convallis sit pellentesque lacus proin. Et ipsum velit diam nulla, fringilla vel tincidunt vitae, elit turpis tellus vivamus, dictum adipiscing convallis magna id. Viverra eu amet sit, dignissim tincidunt volutpat nulla tincidunt, feugiat est erat dui tempor, fusce tortor auctor vestibulum. Venenatis praesent risus orci, ante nam volutpat erat. Cursus non mollis interdum maecenas, consequat imperdiet penatibus enim, tristique luctus tellus eos accumsan, ridiculus erat laoreet nunc.</p>
</div>
</div>
</div>
</div>
</div>
<div class="item" data-title="Page 3">
<img class="header_image" src="http://wallpaperspoint.net/wp-content/walls/9_landscape_wallpaper_03/autumn-forest-landscape-wallpaper.jpg" alt="" />
<div class="container header">
<div class="carousel-caption">
<h1>  Text Text, <br /> Text Text<br />Text Text...</h1>
<!--<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>-->
</div>
</div>
<div class="red_gradient">
<div class="row-fluid green_stripe"></div>
<div class="container">
<div class="row-fluid">
<div class="span6">
<h1>Page 3</h1>
<p>Lorem ipsum dolor sit amet, maiores ornare ac fermentum, imperdiet ut vivamus a, nam lectus at nunc. Quam euismod sem, semper ut potenti pellentesque quisque. In eget sapien sed, sit duis vestibulum ultricies, placerat morbi amet vel, nullam in in lorem vel. In molestie elit dui dictum, praesent nascetur pulvinar sed, in dolor pede in aliquam, risus nec error quis pharetra. Eros metus quam augue suspendisse, metus rutrum risus erat in. In ultrices quo ut lectus, etiam vestibulum urna a est, pretium luctus euismod nisl, pellentesque turpis hac ridiculus massa. Venenatis a taciti dolor platea, curabitur lorem platea urna odio, convallis sit pellentesque lacus proin. Et ipsum velit diam nulla, fringilla vel tincidunt vitae, elit turpis tellus vivamus, dictum adipiscing convallis magna id. Viverra eu amet sit, dignissim tincidunt volutpat nulla tincidunt, feugiat est erat dui tempor, fusce tortor auctor vestibulum. Venenatis praesent risus orci, ante nam volutpat erat. Cursus non mollis interdum maecenas, consequat imperdiet penatibus enim, tristique luctus tellus eos accumsan, ridiculus erat laoreet nunc.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#headerCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#headerCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
</div>
<!-- /.container -->
<!-- Javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
!function ($) {
$(function(){
// carousel demo
$('#headerCarousel').carousel({
interval: false
})
})
}(window.jQuery)
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#headerCarousel").swiperight(function() {
$("#headerCarousel").carousel('prev');
});
$("#headerCarousel").swipeleft(function() {
$("#headerCarousel").carousel('next');
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.carousel[id]').each(function() {
var html = '<div class="nav-collapse collapse" data-target="' + $(this).attr('id') + '"><ul class="nav">';
for(var i = 0; i < $(this).find('.item').size(); i ++) {
html += '<li';
if(i == 0) {
html += ' class="active"';
}
var item = $(this).find('.item').get(i);
html += '><a href="#">' + $(item).attr('data-title') + '</a></li>';
}
html += '</ul></li>';
$('.btn-navbar').after(html);
$('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide();
}).bind('slid', function(e) {
var nav = $('.nav-collapse[data-target="' + $(this).attr('id') + '"] ul');
var index = $(this).find('.item.active').index();
var item = nav.find('li').get(index);
nav.find('li.active').removeClass('active');
$(item).find('li').addClass('active');
var nav = $('.carousel-nav[data-target="' + $(this).attr('id') + '"] ul');
var index = $(this).find('.item.active').index();
var item = nav.find('li').get(index);
nav.find('li a.active').removeClass('active');
$(item).find('a').addClass('active');
if(index == 0) {
$('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut();
} else {
$('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn();
}
if(index == nav.find('li').size() - 1) {
$('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut();
} else {
$('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn();
}
});
$('.nav a').bind('click', function(e) {
var index = $(this).parent().index();
var carousel = $('#' + $(this).closest('.nav-collapse').attr('data-target'));
carousel.carousel(index);
e.preventDefault();
});
});
</script>
</body>
</html>
更新---我发现生成的页面源表单Drupal将脚本修改为：
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.carousel[id]').each(function() {
//For each carousel on the page, create this HTML
var html = '<div class="nav-collapse collapse" data-target="' + $(this).attr('id') + '"><ul class="nav">';
for(var i = 0; i < $(this).find('.item').size(); i ++) {
html += '<li';
if(i == 0) {
html += ' class="active"';
}
var item = $(this).find('.item').get(i);
html += '><a href="#">' + $(item).attr('data-title') + '</a>'; ////Error should be html += '><a href="#">' + $(item).attr('data-title') + '</a></li>';
}
html += '</li';></ul>'; ////Error should be html += '</ul></li>';
$('.btn-navbar').after(html);
$('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide();
}).bind('slid', function(e) {
var nav = $('.nav-collapse[data-target="' + $(this).attr('id') + '"] ul');
var index = $(this).find('.item.active').index();
var item = nav.find('li').get(index);
nav.find('li.active').removeClass('active');
$(item).find('li').addClass('active');
var nav = $('.carousel-nav[data-target="' + $(this).attr('id') + '"] ul');
var index = $(this).find('.item.active').index();
var item = nav.find('li').get(index);
nav.find('li a.active').removeClass('active');
$(item).find('a').addClass('active');
if(index == 0) {
$('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut();
} else {
$('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn();
}
if(index == nav.find('li').size() - 1) {
$('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut();
} else {
$('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn();
}
});
$('.nav a').bind('click', function(e) {
var index = $(this).parent().index();
var carousel = $('#' + $(this).closest('.nav-collapse').attr('data-target'));
carousel.carousel(index);
e.preventDefault();
});
});
</div></script> ////Error added </div>
有谁知道为什么它会删除列表元素并添加div标签？或者，如果有更好的方法对此部分进行编码，那么它就不会被修改。
答案 0 :(得分：0)
我的错误出现在for循环中：
for(var i = 0; i > $(this).find('.item').size(); i ++) {
i > $(this)应为i!=$(this)