CSS留下幫助jQuery的

好了，所以基本上我有一個設置是這樣的：CSS留下幫助jQuery的

<div id="tabs"> 
    <div id="tab_one"> 
     Something here 
    </div> 

    <div id="tab_two"> 
     Something else here 
    </div> 

    <div id="tab_three"> 
     Another thing here 
    </div> 
</div>

現在我的CSS是這樣的：

#tab_one { 
    position:relative; 
    left:0px; 
    top:0px; 
} 
#tab_two { 
    position:relative; 
    left:5000px; 
} 
#tab_three { 
    position:relative; 
    left:5000px; 
}

所以基本上我在做什麼這裏只顯示tab_one。然後，當用戶點擊tab_two它將tab_two更改爲左：0px; 並將tab_one更改爲left：5000px; （所以它只是切換屬性）。問題是因爲它的相對性低於它之前的標籤的高度。所以如果tab_one的高度是50px，那麼tab_two的頂部將是50px。我需要它是0px。它可以工作，如果我將它設置爲絕對，然後然後回到相對，但對於我我正在處理的項目不可能，因爲它重新加載了我不想發生的選項卡。任何幫助弄清楚如何重疊或使其0而不是50將非常感謝。

來源

2009-10-23 ngreenwood6

哦順便說一句，我忘了在下面的答案中提到...因爲更廣泛和更寬的diaplys，雙顯示器，三顯示器等，使用負定位更好：P – Mottie

它看起來像你有你可能有你的位置絕對和位置相對混合...檢查了這個偉大的教程CSS positioning。

這就是說，我把這個例子扔給你看看（working here）。

CSS

.tabs { 
position: relative; 
left: 0; 
top: 0; 
} 
.info { 
position: absolute; 
left: -5000px; 
top: 25px; 
} 
.active { 
position: absolute; 
top: 25px; 
left: 0; 
}

HTML

<div class="tabs"> 
<a href="#tab_one">Tab 1</a> 
<a href="#tab_two">Tab 2</a> 
<a href="#tab_three">Tab 3</a> 

<div> 
    <div id="tab_one" class="info"> 
    Something here 
    </div> 

    <div id="tab_two" class="info"> 
    Something else here 
    </div> 

    <div id="tab_three" class="info"> 
    Another thing here 
    </div> 
</div>

腳本

$(document).ready(function(){ 
// select first tab, get ID 
var tmp = $('.tabs a:eq(0)').attr('href'); 
$(tmp).removeClass('info').addClass('active'); 

// tab display 
$('.tabs a').click(function(){ 
    $('.tabs div > div').removeClass('active').addClass('info'); 
    $($(this).attr('href')).addClass('active'); 
    return false; 
}) 
})

編輯：哎呀了「.tabs一個」 CSS在引擎收錄的代碼是從遺留下來的時候我就開始了每個標籤作爲一個div ......它什麼都不做，所以你可以忽略它。

來源

2009-10-23 06:17:05 Mottie

您可以使用display屬性隱藏/顯示選項卡，而不使用偏移量。在「標籤」類添加到標籤的容器：

<div id="tabs"> 
    <div id="tab_one" class="tab"> 
     Something here 
    </div> 

    <div id="tab_two" class="tab"> 
     Something else here 
    </div> 

    <div id="tab_three" class="tab"> 
     Another thing here 
    </div> 
</div>

而且樣式表：

.tab { display: none } /* Don't render by default */ 

.show_tab_one #tab_one, 
.show_tab_two #tab_two, 
.show_tab_three #tab_three { display: block } /* Selectively render */

所有您需要做的是類#tabs元素的設置爲「show_tab_one」之一，「show_tab_two」或「show_tab_three」。當然，如果您有動態ID的動態數量的選項卡，此解決方案將無法爲您工作。

來源

2009-10-23 04:37:02

我不能使用顯示：無，因爲它也重新加載數據。 – ngreenwood6

您能否詳細說明「重新加載數據」？ –

CSS留下幫助jQuery的

回答

相關問題