Tabs und ausgeblendeter Inhalt

Question

Ich habe alles versucht, recherchiert und bearbeitet, aber ich kenne CSS nicht so gut. Ich versuche, die Überschriften die gleiche Breite zu behalten, dann habe ich einen Übergang, der eine Beschreibung hat, aber breiter als der Überschrift-Abschnitt. So etwas wie im folgenden Beispiel, aber zum Anzeigen und Ausblenden von Inhalten beim Hover statt beim Klicken.

Das Beispiel HTML:

<div class="tabContainer" > 
    <ul class="digiTabs" id="sidebarTabs"> 
    <li id="1" class="selected t">Overview</li> 
    <li id="2" class="t">Itinerary</li> 
    <li id="3" class="t">Destination Info</li> 
    </ul> 
    <div id="t1" style="display:none;" class="tabContent">...</div>  
    <div id="t2" style="display:none;" class="tabContent">...</div> 
    <div id="t3" style="display:none;" class="tabContent">...</div> 
</div> 

Das Beispiel CSS:

.tabContainer {margin: 0;} 
.tabContainer .digiTabs { 
    list-style: none; 
    display: block; 
    overflow: hidden; 
    margin: 0; 
    padding: 0px; 
    position: relative; 
    top: 1px; 
} 
.tabContainer .digiTabs li { 
    float: left; 
    background-color: #e7e5df; 
    padding: 5px 15px!important; 
    cursor: pointer; 
    border-bottom:none; 
    margin-right: 1px; 
    color: #801350; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: 14px; 
} 
.tabContainer .digiTabs .selected { 
    background-color: #fff; 
    color: #393939; 
    border-left: 1px solid #e1e1e1; 
    border-top: 1px solid #e1e1e1; 
    border-right: 1px solid #e1e1e1; 
} 
#tabContent { 
    padding: 10px; 
    background-color: #fff; 
    overflow: hidden; 
    float: left; 
    margin-bottom: 10px; 
    border: 1px solid #e1e1e1; 
} 

Das Beispiel JS:

$(function(){ 
    $(".t").bind("click",function(){ 
     $(".tabContent").each(function(){ 
      $(this).hide(); 
     }); 
     var id = $(this).attr("id"); 
     $("#t"+id).show(); 
    }); 
}); 

http://jsfiddle.net/NIkhar/NRkL9/2/

Jede Hilfe würde geschätzt.

Answer 1

versuchen, dass fiddle Sie nicht jeder verwenden müssen, und ich habe hinzugefügt Klasse Handler

$(function(){ 

     $(".t").hover(function(){ 
      $(".tabContent").hide(); 
      $('.t').removeClass('selected'); 
      $(this).addClass('selected'); 
     var id = $(this).attr("id"); 
      $("#t"+id).show(); 
     }); 

}); 

Answer 2

einfach diesen Code ändern ausgewählt:

$(function(){ 
    $(".t").bind("click",function(){ 
     $(".tabContent").each(function(){ 
      $(this).hide(); 
     }); 
     var id = $(this).attr("id"); 
     $("#t"+id).show(); 
    }); 
}); 

In diese:

$(function(){ 
    $(".t").hover(function() { /* ONLY THIS LINE HAS CHANGED */ 
     $(".tabContent").each(function(){ 
      $(this).hide(); 
     }); 
     var id = $(this).attr("id"); 
     $("#t"+id).show(); 
    }); 
});