HTML
<ul class="nav-tabs">
<li class="tab1"><a href="/" class="tab-link">Home</a></li>
<li class="tab2 active"><a href="/" class="tab-link">...</a></li>
<li class="tab3"><a href="/" class="tab-link">...</li>
<li class="tab4"><a href="/" class="tab-link">...</li>
</ul>
<div id="tab-content">
<div class="tab2"></div>
<div class="tab3"> </div>
</div>
когда мышь находится на навигационных вкладках li. показано соответствующее содержимое div в табу-содержании. когда опускаются nav-tabs li. отображается соответствующее содержимое div.
JQuery:
$( ".nav-tabs li" ).hover(
function() {
$( "#tab-content div" ).css( "display", "block" );
}, function() {
$( "#tab-content div" ).css( "display", "none" );
}
);
с кодом что-то не так. когда отображается соответствующий div в части tab-content
. Я не могу переместить мышь на дочернем ссылку. 2, когда я нахожусь на других nav-tabs li
. другое содержание li также показывает. как исправить? Спасибо.
Пытаться
$(".nav-tabs li").hover(function () {
$("#tab-content div." + this.className.match(/(tab\d+)/)[0]).show();
}, function () {
$("#tab-content div." + this.className.match(/(tab\d+)/)[0]).hide();
});
Демо: скрипка