tab기능-attr,hide,show

css에서는 클래스에 active가 있으면 검정바탕에 흰글씨가 생기고,

삼각형이 나온다.

 

그러니 내가 할일은;;;

js에서 active를 넣었다 뺐다 하면된다.

jquery에서는 hide()와 show()로 display:none / display:block로 표현할수 있다.

 

******************css*********************************

/*새로작성 active라는 클래스명이 있으면 검정바탕에 흰글씨*/
.work-section .tabs-nav a:hover,
.work-section .tabs-nav a.active {
    background-color: rgb(51, 51, 51);
    color: rgb(255, 255, 255);
}
/*새로작성 a에 active가 있을때만 삼각형이 보인다.
우리가 해야할거것은 js에서 a에 active만 넣었다뺐다하면됨.*/
.work-section .tabs-nav a.active:after {
    background: url(../img/sprites.png) no-repeat 0 0;
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 37px;
    height: 19px;
    margin-left: -18px;
}

 

*******************jquery***************************

변수 지정방법

. a를 클릭하면 그에 해당하는 panel 즉 #work1이 나와야한다.

그러니 변수를 a와 content에 해당하는 tabpanel을 변수로 지정해주자.

 

 

$(function(){

    var tabAnchor = $('.tabs-nav li a'),

        tabPanel = $('.tabs-panel');

    //링크를 클릭하면 할일

    tabAnchor.click(function(e){

        e.preventDefault();

       

        // 1. 모두active를 빼고 클릭한 요소만 active추가하는 방법

         tabAnchor.removeClass('active');//모든 active를 빼고

         $(this).addClass('active'); //그 요소만 추가

         

        //  2.클릭한 녀석에만 active추가하고 나머지 요소에는 빼는 방법

        //   $(this).addClass('acitve').siblings().removeClass('acitve');

        //  this는 내가 선택한 a이다. a는 형제자매가 없으므로 sibling를 쓸수없다.(우리는 변수를 li a로 잡았다. )

        tabPanel.hide(); //열자마자 모든패널이 사라지고.

        //Work 01를 클릭하면 $('#work01').show(); 이 나와야하고

        //Work 02를 클릭하면 $('#work02').show(); 이 나와야하고

        //Work 03를 클릭하면 $('#work03').show(); 이 나와야하고

        //a를 클릭하면=.work02를 클릭하면 id ="work02"가 나와야한다.

       

        /*<li><a href="#work03">Work 03</a></li>에서

        work03을 클릭하면 href인 #work03이 나와야한다.a의속성이 와야한다.

        attr이용

        */

        //var c =A.attr('href');  a의 속성인 href를 변수 C에 저장한다.

       

        var $target = $(this).attr('href');

        console.log($target);

        $( $target).show(); //변수명에는 ''를 쓰지않는다.

});

});