부트 스트랩 붕괴시 링크와 ID를 모두 href로 전달

아래의 코드에서 설명한 것과 유사한 부트 스트랩 붕괴를 사용하고 있습니다. 'Collapsible Group 1', 'Collapsible Group 2', 'Collapsible Group 3'에서 붕괴 부분을 확장하여 다른 페이지를 가리 키기를 원합니다. href에서 div의 ID는 다른 페이지를 가리켜 야합니다.부트 스트랩 붕괴시 링크와 ID를 모두 href로 전달

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" 
 
    href= 
 
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script 
 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
    </script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Accordion Example</h2> 
 
    <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> 
 
    <div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapse1" class="panel-collapse collapse in"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapse2" class="panel-collapse collapse"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapse3" class="panel-collapse collapse"> 
 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

출처

2017-12-29 madhuri

, 그래서 부트 스트랩의 오른쪽 버전의 질문에 태그를하시기 바랍니다 할 수있는 . – Klooven

당신은 이벤트 핸들러

$('#collapse2').on("shown.bs.collapse", function() { 
 

 
    //Here you can use window.location = "" to redirect or do something else. 
 

 
    console.log("Collapse Opened"); 
 

 
}) 
 

 
//And so on for all the collapses

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
    </script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <h2>Accordion Example</h2> 
 
    <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> 
 
    <div class="panel-group" id="accordion"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse1" class="panel-collapse collapse in"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse2" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapse3" class="panel-collapse collapse"> 
 
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

당신은 BS 3을 사용하고

출처

2018-01-02 05:38:59

부트 스트랩 붕괴시 링크와 ID를 모두 href로 전달

답변

관련 문제