2015-09-15 71 views
0

我試圖從一個手風琴鏈接到另一個在同一頁上。Bootstrap - 手風琴之間的鏈接在同一頁

目前,我的代碼是這樣的:

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="SHORTCUT ICON" type="image/x-icon" href="/favicon.ico"> 

    <title>TITLE</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/modern-business.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 
    <!-- Page Content --> 
    <div class="container"> 

     <!-- Page Heading/Breadcrumbs --> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <h1 class="page-header">HEADING 

       </h1> 
      </div> 
     </div> 
     <!-- /.row --> 

     <!-- Content Row --> 

    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="panel-group" id="accordion"> 

       <!-- .panel --> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">QUESTION ONE?</a> 
         </h4> 
        </div> 
        <div id="collapseOne" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <p>Answer to question one</p> 
         </div> 
        </div> 
       </div> 
       <!-- /.panel --> 
       <!-- panel --> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">QUESTION TWO?</a> 
         </h4> 
        </div> 
        <div id="collapseTwo" class="panel-collapse collapse"> 
         <div class="panel-body"> 

          <p>Answer for question two, which has <a href="about.html#collapseOne" target="_main">THIS LINK</a> as a link to an accordion on another html page.</p> 
         </div> 
        </div> 
       </div> 
       <!-- /.panel --> 
       <!-- panel --> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">QUESTION THREE?</a> 
         </h4> 
        </div> 
        <div id="collapseThree" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <p>The answer to question three. 
          </p> 

         </div> 
        </div> 
       </div> 
       <!-- /.panel --> 
       <!-- panel --> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">QUESTION FOUR?</a> 
         </h4> 
        </div> 
        <div id="collapseFour" class="panel-collapse collapse"> 
         <div class="panel-body"> 

          <p>More info on this is available <a href="#collapseThree">here.</a> 
         </div> 
        </div> 
       </div> 
       <!-- /.panel --> 
       </div> 
       <!-- /.panel-group --> 
      </div> 
      <!-- /.col-lg-12 --> 
     </div> 
     <!-- /.row --> 



    </div> 
    <!-- /.container --> 

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 
    <!-- Below function lets you link to and opens accordian panel --> 
    <script> 

     $(document).ready(function() { 
      location.hash && $(location.hash + '.collapse').collapse('show'); 
    }); 
    </script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

</body> 

</html> 

OK,我的問題是,我有一個網頁包含四個部分倒塌手風琴。

collapseTwo包含指向不同頁面的手風琴的鏈接。這個鏈接工作...它加載關於頁面,並在關於頁面上打開#collapseOne。

collapseFour包含指向#collapseThree(位於同一頁面上)的鏈接,此鏈接不起作用。它什麼都不做。我想要它做的是打開#collapseThree。在鏈接

+0

你檢查它的手柄網址是什麼? – KeepMove

+0

你是什麼意思? – ssx

回答

0

您沒有使用數據屬性:

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">here.</a> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <!-- Page Heading/Breadcrumbs --> 
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <h1 class="page-header">HEADING 
 

 
       </h1> 
 

 
    </div> 
 
    </div> 
 
    <!-- /.row --> 
 
    <!-- Content Row --> 
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <div class="panel-group" id="accordion"> 
 
     <!-- .panel --> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">QUESTION ONE?</a> 
 
         </h4> 
 

 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Answer to question one</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- /.panel --> 
 
     <!-- panel --> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">QUESTION TWO?</a> 
 
         </h4> 
 

 
      </div> 
 
      <div id="collapseTwo" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Answer for question two, which has <a href="about.html#collapseOne" target="_main">THIS LINK</a> as a link to an accordion on another html page.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- /.panel --> 
 
     <!-- panel --> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">QUESTION THREE?</a> 
 
         </h4> 
 

 
      </div> 
 
      <div id="collapseThree" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>The answer to question three.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- /.panel --> 
 
     <!-- panel --> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">QUESTION FOUR?</a> 
 
         </h4> 
 

 
      </div> 
 
      <div id="collapseFour" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>More info on this is available <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">here.</a> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- /.panel --> 
 
     </div> 
 
     <!-- /.panel-group --> 
 
    </div> 
 
    <!-- /.col-lg-12 --> 
 
    </div> 
 
    <!-- /.row --> 
 
</div>

+0

哇 - 謝謝你......這就是這麼簡單:\ – ssx

+0

沒問題,不客氣。 – vanburen