무료홈페이지제작 - 에티테마
미디어 | 무료템플릿자료실 | 포트폴리오

일반탭 or 부트스트랩 페이지 넘어간후 텝메뉴 이동시 팁

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 111회 작성일 19-09-10 20:40

본문

a0d2a654fcd9a5d1269015dad11e92f3_1568115057_53.png


 

일반탭메뉴의 경우에는
주소부분 뒤에 tab.php#tab2
위처럼 입력한후 페이지 받는쪽 
즉 텝메뉴에서 <a name="tab2"> 라고 작성해주면
자동으로 탭이 변경되지만

부트스트랩은 좀 다릅니다.
한가지가 더 있습니다.

그래서 자바스크립트로 처리할까 했지만 저의 경우 쿼리스트링에 GET 에 값을 주고 날려서
사용합니다.
자바스크립트로 처리하기에는 PHP 프로그램을 탭메뉴를 구동시켜야 하는 조건도 있으므로
PHP 로 구현합니다.

보내는쪽
index.php?C=2
탭메뉴 변경할 받은쪽 페이지에서
 
$C = $_GET['C'];

if($C == "1") { 
$in1 = "in";
$active1 = "active";
}elseif($C == "2") {
$in2 = "in";
$active2 = "active";
}

<div id="banner_2" class="tab-pane fade in active>
한가지 더 있다는것이 in 이라는 것 입니다.
부트스트랩을 사용하다보면 in active 를 같이 변경해줘야 탭메뉴가 변경이 됩니다.

부트스트랩을 사용하시다가 어? 왜 탭메뉴가 안바뀌지 하고 이상하게 생각하셨을
분도 있을거라 생각됩니다.

active 만 클래스에 넣어서 변경하면 안되고 in active 이렇게 두개를 넣어서 변경
해야 됩니다.

저의 경우에는 php 의 PATH 의 부분도 넣어서 프로그램도 구동시켜야 하기 때문에
아래와 같이 처리해서 사용합니다.

<div id="banner_1" class="tab-pane fade <?php echo $in1;?><?php echo $active1;?>>
<div id="banner_2" class="tab-pane fade <?php echo $in2;?><?php echo $active2;?>>

궁금하신점은 질문게시판에 코멘트 남겨주세요
감사합니다.
 
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

Total 16건 1 페이지

카테고리

카테고리
 ETC
 CSS
 JAVASCRIPT
BOOTSTRAP
 HTML5
 VUEJS
 REACTJS
 NODEJS
 PHP
 SQL
 SERVER

프리미엄

프리미엄

최근이미지리스트

최근이미지리스트