Question

请看我的代码人员，我很绝望......

<!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>&nbsp;&nbsp;&nbsp;</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滑动到详细信息页面。它不起作用，我无法弄清楚我的代码有什么问题，请帮忙！非常感谢你！

Answer 1

id是case sensitive。因此，请使用$('#myfavCarousel').carousel('next');代替$('#myFavCarousel').carousel('next');：

＆＃13;

<!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>&nbsp;&nbsp;&nbsp;</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>

＆＃13;

Answer 2

您可以尝试下面的代码

＆＃13;

<!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>&nbsp;&nbsp;&nbsp;</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>

＆＃13;

Bootstrap Carousel无法正常工作！一切都检查，仍然无法正常工作

2 个答案: