jquery 탭을 선택했을 때 사용자 정의 CSS를 추가해야합니까?

Question

나는의 CSS를 수정해야 .ui 상태 활성, .ui-위젯 컨텐츠 다음 .ui 상태 활성 : 그러나

.ui-state-active , .ui-widget-content .ui-state-active { 
    background-image: url('images/tab-over.png') !important; 
} 

, 내가 원하는 효과를 얻을 수행 할 때 클릭하면 웹 사이트의 다른 요소가 영향을받습니다. 탭을 클릭 할 때만이 기능이 필요합니다.

안전한 방법이 있습니까? 내가 질문을 오해하지 않는 경우 당신은 탭 컨트롤

$("#tabs").tabs({ 
    select: function(event, ui) { 
    //ui.item has the current object for you. 
    } 
}); 

http://docs.jquery.com/UI/Tabs#event-select

Answer 1

의 select 이벤트에 코드를 삽입 할 수

<div id="tabs"> 


    <div id="left-side"> 
    </div> 



    <ul class="tab-menu"> 
     <li id="home"> 
     <a href="<%= Url.Action("GetCoreTab", "Tab") %>" class="a"> 
     <b> 
      <div id="home" class="menu"> 
      </div> 
     </b> 
     </a> 
     </li> 
     <li><a href="<%= Url.Action("GetDatesAndLocationTab", "Home") %>" class="a"><b> 
      <div id="dates-and-location" class="menu"> 
      </div> 
     </b></a></li> 
     <li><a href="<%= Url.Action("GetTariffTab", "Home") %>" class="a"><b> 
      <div id="tariff" class="menu"> 
      </div> 
     </b></a></li> 
     <li><a href="<%= Url.Action("GetCustomerInformationTab", "Tab") %>" class="a"><b> 
      <div id="customer-information" class="menu"> 
      </div> 
     </b></a></li> 
     <li><a href="<%= Url.Action("GetRatesAndChargesTab", "Tab") %>" class="a"><b> 
      <div id="rates-and-charges" class="menu"> 
      </div> 
     </b></a></li> 
     <li><a href="<%= Url.Action("GetPaymentsAndVouchersTab", "Tab") %>" class="a"><b> 
      <div id="payments-and-vouchers" class="menu"> 
      </div> 
     </b></a></li> 
     <li><a href="<%= Url.Action("GetDeliveryAndCollectionTab", "Tab") %>" class="a"><b> 
      <div id="delivery-and-collection" class="menu"> 
      </div> 
     </b></a></li> 
     <li><a href="<%= Url.Action("GetGeneralTab", "Tab") %>" class="a"><b> 
      <div id="general" class="menu"> 
      </div> 
     </b></a></li> 
     <li><a href="<%= Url.Action("GetEquipmentAndOtherDriversTab", "Tab") %>" class="a"> 
      <b> 
       <div id="equipment-and-other-drivers" class="menu"> 
       </div> 
      </b></a></li> 
     <li><a href="<%= Url.Action("GetCustomerPreferencesTab", "Tab") %>" class="a"><b> 
      <div id="customer-preferences" class="menu"> 
      </div> 
     </b></a></li> 
     <li><a href="<%= Url.Action("GetCustomerStatisticsTab", "Tab") %>" class="a"><b> 
      <div id="customer-statistics" class="menu"> 
      </div> 
     </b></a></li> 
    </ul> 

    <div id="right-side"> 
    </div> 

</div> 

Answer 2

: 여기

내 HTML 코드입니다 다음과 같이 간단히 수행 할 수 있습니다.

$('#tabs .tab-menu li a').click(function() { 
    $('#tabs .tab-menu li').css('background-image', 'url("images/original-bg.png")'); 
    $(this).parent().css('background-image', 'url("images/tab-over.png")'; 
}); 

Answer 3

WHOA! 여기에있는 것들을 확장하는 방법!

좋아, 우선, jQuery는 훌륭하지만 이미 작업을 완료했습니다. 당신이 성취하고자하는 것을하기 위해 어떤 종류의 자바 스크립트도 필요하지 않습니다. 간단한 CSS를 사용하십시오.

시계 :

앞에서 약속 링크에 관해서는

/* FYI: The following CSS selector can also be used to make changes 
    via JavaScript/jQuery to Currently selected tab. 
    I have a blog post about that I'll list at the end of my answer */ 
.ui-tabs-selected { 
    background-image: url('images/tab-over.png') !important; 
} /* This will change the background of the 
    currently selected li element acting as the tab */ 

/* If you would like to change the background or something of current panel, 
    you would access it with the following CSS selector */ 
.ui-tabs-panel:not(.ui-tabs-hide) { 
    background-image: url('images/tab-over.png') !important; 
} /* This will change the background of the 
    currently selected div element acting as the panel */ 

이 this blog post는 레즈 액세스에 대한 훨씬 더 깊이 들어가는는 현재 "탭 이벤트"의 "외부"탭을 선택합니다.