css와 jquery를 사용하여 표를 사용하여 정보를 탐색합니다.

Question

제품에 대한 정보를 얻기 위해 자체 표 탐색을 작성하려고합니다. 나는 jQuery와 CSS에 대한 내 자신의 지식을 사용하여이 글을 썼지 만, 그럴 필요가 없을 때 매우 부피가 크다고 염려한다. 모든 클릭을 확인하는 방법이 있습니까? 또는이 예를 들어 일을 단지 더 나은 방법 : 개인적 좋겠 http://jsfiddle.net/KrR3H/1/

$('div#tab1').click(function(){ 
    $('div#infoArea').html('example product info'); 
    $('#infoTab1').css({'border-bottom-right-radius' : '0px', 'border-bottom-left-radius' : '0px'}); 
    $('#infoTab2').css({'border-bottom-right-radius' : '5px', 'border-bottom-left-radius' : '5px'}); 
    $('#infoTab3').css({'border-bottom-right-radius' : '5px', 'border-bottom-left-radius' : '5px'}); 
    return false; 
}); 

Answer 1

제안 :

var contents = { 
    'tab1' : 'Description stuff', 
    'tab2' : 'Technical jiggery-pokery', 
    'tab3' : 'Reviews' 
}; 
$('#tabContainer div[id]').click(function(){ 
    var self = this; 
    $('#infoArea').html(contents[self.id]); 
    $(self).css({ 
     'border-bottom-right-radius' : '0px', 
     'border-bottom-left-radius' : '0px' 
    }).siblings().css({ 
     'border-bottom-right-radius' : '5px', 
     'border-bottom-left-radius' : '5px' 
    }); 
}); 

JS Fiddle demo합니다.

내가 직접 CSS를 조작하지 을 선호하는 것, 위의를 제공하는 데, 오히려 동일한 효과를 달성하기 위해 addClass()/removeClass()을 사용합니다 :

var contents = { 
    'tab1' : 'Description stuff', 
    'tab2' : 'Technical jiggery-pokery', 
    'tab3' : 'Reviews' 
}; 
$('#tabContainer div[id]').click(function(){ 
    var self = this; 
    $('#infoArea').html(contents[self.id]); 
    $(self).addClass('tabSelected').siblings().removeClass('tabSelected'); 
}); 

JS Fiddle demo합니다. infoTab이 제공하는 선택기가 #하지 아니하는 기간 (.)로 시작되는 id 한,

.infoTab1 { 
    border-bottom-left-radius:0px; 
} 

그러나 :

참고 후자의 버전이 CSS의 일부 수정을 요구, 당신은 원래했다 :

:

#infoTab1 { 
    border-bottom-left-radius:0px; 
} 

또한 당신의 :hover 상호 작용에 대한 선택은 원래으로 작성되었습니다

.infoTab a:hover { 
    background-color:red; 
} 

이 선택하지만, :hover이 infoTab의 클래스 요소 내에서 -ed 된 a을 찾고 있었다;

a.infoTab:hover { 
    background-color:red; 
} 

참고 :

• addClass() 선택기가 있었다 있도록 되는 것은, 그 클래스를 가지고 공중 선회 한 요소로 다시 기록 될 때.
• click().
• css().
• CSS Selectors.
• html().
• removeClass().
• siblings().