jQuery選項卡中的相同高度li

我已經從昨天清除了這個問題，希望問題會清楚。下面是一個簡單的JS，它找到最高的li，然後讓所有li的高度。這個問題發生在ul被放置在jQuery標籤中，當頁面加載到第一個標籤下時，所有標籤信息都會顯示出來。一旦你點擊一個標籤（任何標籤），一切都會自行解析並顯示。這是爲什麼發生？我該如何解決？jQuery選項卡中的相同高度li

jsfiddle應該清楚問題是什麼。

jsfiddle

$(document).ready(function() { 

var maxHeight = 0; 

$('ul#list li').each(function() { 
maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
}).height(maxHeight); 


$('.tabs .tab-links a').on('click', function(e) { 
    var currentAttrValue = $(this).attr('href'); 

    // Show/Hide Tabs 
    $('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400); 

    // Change/remove current tab to active 
    $(this).parent('li').addClass('active').siblings().removeClass('active'); 


    e.preventDefault(); 
    }); 
});

來源

2015-04-07 LyleCrumbstorm

你只需要在列表高度設置行後添加$('.tab').hide();$('.tab.active').show();離開

.tab.active {display:block;left: 0px;}

見jsfiddle

來源

2015-04-07 16:51:57 imnancysun

什麼在什麼？你知道我失去了多少腦細胞嗎？！讓我玩這個一分鐘，但它似乎是一個勝利者！ – LyleCrumbstorm

這是燦爛而美麗的，我喜歡這個網站！謝謝！ – LyleCrumbstorm

@LyleCrumbstorm只是看看代碼，你會看到。對困惑感到抱歉。 – imnancysun

在閱讀你的問題，我有這樣的印象你想要保持所有內容div的大小不僅是t他可點擊標籤。

我改變了這個片斷：

$('ul#list li').each(function() { 
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
}).height(maxHeight);

要：

$('div.tab-content div.tab').each(function() { 
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
}).height(maxHeight);

如果是這種情況： https://jsfiddle.net/x50zL2to/59/

來源

2015-04-07 17:12:06

jQuery選項卡中的相同高度li

回答

相關問題