引导旋转木马不工作!都检查过了，还是不行
Bootstrap Carousel not working! Everything checked, still not working
请大家看看我的代码，我已经绝望了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- jquery ui -->
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function slideFav() {
alert("in slideFav");
$('#myFavCarousel').carousel('next');
}
</script>
</head>
<body>
<!-- favorite content -->
<div id="favorite">
<div class="page-header">
<h3>Favorites</h3>
</div>
<div class="well well-sm">
<!-- CAROUSEL START HERE **************************************************-->
<div id="myfavCarousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="panel panel-default item active">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#legislators" aria-controls="legislators" role="tab" data-toggle="tab">Legislators</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="legislators">
<div class="panel-heading" style="overflow:hidden;">
<span class="panel_heading_text">Favorite Legislators</span>
</div>
<!-- panel_heading -->
<!-- FAVOIRTE**************************************************-->
<div class="panel-body">
<table class="table table-hover table-responsive" id="all_favorite_table">
<thead>
<tr>
<th> </th>
<th>Image</th>
</tr>
<tr>
<th><button id=FavDetail type='button' class='btn btn-primary' onclick='slideFav()'>View Details</button></th>
<th>Image</th>
</tr>
</thead>
</table>
</div>
<!-- panel_body -->
</div>
<!-- ******************************************************* -->
</div>
<!-- tab-content -->
</div>
<!-- panel panel-default item active -->
<!-- DETAILDED PAGE******************************************************* -->
<div class="panel item">
<div class="panel-heading row">
<div>
<!-- change button func to slideFav()-->
<div style="float:left; margin-left:15px;"><button href="#myfavCarousel" data-slide="prev" class="glyphicon glyphicon-chevron-left btn btn-default" id="fav_prev_button"></button></div>
<div class="page-header" style="font-size: 20px; padding-top: 5px; padding-bottom: 12px;"> Details</div>
</div>
</div>
<!-- DETAILDED PAGE for favorite******************************************************* -->
</div>
</div>
<!-- carousel-inner -->
</div>
<!-- carousel slide -->
</div>
</div>
<!-- main_favorite -->
</body>
</html>我正在尝试实现的功能，如果你点击按钮"查看详细信息"，它会滑动到使用jquery的详细页面。它不工作，我不知道我的代码出了什么问题，请帮助!提前谢谢你!
id区分大小写。所以用$('#myfavCarousel').carousel('next');代替$('#myFavCarousel').carousel('next');:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- jquery ui -->
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function slideFav() {
alert("in slideFav");
$('#myfavCarousel').carousel('next');
}
</script>
</head>
<body>
<!-- favorite content -->
<div id="favorite">
<div class="page-header">
<h3>Favorites</h3>
</div>
<div class="well well-sm">
<!-- CAROUSEL START HERE **************************************************-->
<div id="myfavCarousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="panel panel-default item active">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#legislators" aria-controls="legislators" role="tab" data-toggle="tab">Legislators</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="legislators">
<div class="panel-heading" style="overflow:hidden;">
<span class="panel_heading_text">Favorite Legislators</span>
</div>
<!-- panel_heading -->
<!-- FAVOIRTE**************************************************-->
<div class="panel-body">
<table class="table table-hover table-responsive" id="all_favorite_table">
<thead>
<tr>
<th> </th>
<th>Image</th>
</tr>
<tr>
<th><button id=FavDetail type='button' class='btn btn-primary' onclick='slideFav()'>View Details</button></th>
<th>Image</th>
</tr>
</thead>
</table>
</div>
<!-- panel_body -->
</div>
<!-- ******************************************************* -->
</div>
<!-- tab-content -->
</div>
<!-- panel panel-default item active -->
<!-- DETAILDED PAGE******************************************************* -->
<div class="panel item">
<div class="panel-heading row">
<div>
<!-- change button func to slideFav()-->
<div style="float:left; margin-left:15px;"><button href="#myfavCarousel" data-slide="prev" class="glyphicon glyphicon-chevron-left btn btn-default" id="fav_prev_button"></button></div>
<div class="page-header" style="font-size: 20px; padding-top: 5px; padding-bottom: 12px;"> Details</div>
</div>
</div>
<!-- DETAILDED PAGE for favorite******************************************************* -->
</div>
</div>
<!-- carousel-inner -->
</div>
<!-- carousel slide -->
</div>
</div>
<!-- main_favorite -->
</body>
</html>您可以尝试下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- jquery ui -->
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function slideFav() {
alert("in slideFav");
$('#myFavCarousel').carousel('next');
}
function slideFav1() {
alert("in slideFav1");
$('#myFavCarousel').carousel('prev');
}
</script>
</head>
<body>
<!-- favorite content -->
<div id="favorite">
<div class="page-header">
<h3>Favorites</h3>
</div>
<div class="well well-sm">
<!-- CAROUSEL START HERE **************************************************-->
<div id="myFavCarousel" class="carousel slide" data-ride="carousel" data-interval="false" data-wrap="false">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="panel panel-default item active">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#legislators" aria-controls="legislators" role="tab" data-toggle="tab">Legislators</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="legislators">
<div class="panel-heading" style="overflow:hidden;">
<span class="panel_heading_text">Favorite Legislators</span>
</div>
<!-- panel_heading -->
<!-- FAVOIRTE**************************************************-->
<div class="panel-body">
<table class="table table-hover table-responsive" id="all_favorite_table">
<thead>
<tr>
<th> </th>
<th>Image</th>
</tr>
<tr>
<th><button id=FavDetail type='button' class='btn btn-primary' onclick='slideFav()'>View Details</button></th>
<th>Image</th>
</tr>
</thead>
</table>
</div>
<!-- panel_body -->
</div>
<!-- ******************************************************* -->
</div>
<!-- tab-content -->
</div>
<div class="panel item">
<div class="panel-heading row">
<div>
<!-- change button func to slideFav()-->
<div style="float:left; margin-left:15px;"><button onclick="slideFav1()" data-slide="prev" class="glyphicon glyphicon-chevron-left btn btn-default" id="fav_prev_button"></button></div>
<div class="page-header" style="font-size: 20px; padding-top: 5px; padding-bottom: 12px;" > Details</div>
</div>
</div>
<!-- DETAILDED PAGE for favorite******************************************************* -->
</div>
</div>
</div>
<!-- carousel slide -->
</div>
</div>
<!-- main_favorite -->
</body>
</html>相关文章：
- Javascript在实现时似乎跳过了一行(如果count==1）
- 我需要迭代一个JSON数组——不知道如何做到——已经搜索过了，但仍然可以'我一点也不知道
- Hammer.js过了一段时间就停止工作了
- 如何检查单选按钮是否使用JavaScript进行了检查
- grunt contrib jshint-error在定义之前就已经使用过了
- 进行自动实时聊天/虚假聊天，我的javascript跳过了第一个响应
- 如果事件发生后插入了检查代码，那么$(document）.ready(）会被激发吗
- 再次调用时跳过了 Ajax
- 我试过了，但调用成员单击不适用于输入按钮，它与其他按钮非常不同
- 窗口位置不起作用，我已经尝试过了
- 引导程序下拉不起作用.什么都试过了..(引导2.3.2）
- 为什么将一个值推入我的数组被跳过了
- 七吃九:为什么我的索引8在这个d3选择中被跳过了
- 为什么这个复选框不触发jquery代码onchange?我什么都试过了，但都不起作用
- 定义了检查所有子数组的最干净的方法
- jQuery不工作-'jQuery在定义之前就已经使用过了;
- getElementById有时为null.已经试过了.加载完毕.准备好了
- Javascript通过jquery getscript加载了检查
- 多个ajax请求过了一段时间不起作用
- 引导旋转木马不工作!都检查过了，还是不行
