jquery圓形選項卡跨瀏覽器（輕微問題）

我一直在試圖創建一些沒有圖像的圓形選項卡在所有瀏覽器中工作，我從不同的地方採取各種代碼，幾乎得到它的工作，唯一的問題是選項卡背景顏色選項卡處於活動狀態時不會保持白色。我一直試圖解決這個問題好幾個小時沒有運氣。它採用csspie爲圓角，你可以在這裏查看網頁上的一個例子：jquery圓形選項卡跨瀏覽器（輕微問題）

http://www.usedcar.co.uk/testtabs.html

任何幫助，將不勝感激。我還沒有設法找到一個體面的jQuery選項卡沒有圖像的例子。

來源

2011-04-14 mark33

你有這個問題，所有的瀏覽器或某幾個？ – wdm 2011-04-14 15:03:28

我所有最近的大型客戶（財富500強）都對Jquery UI選項卡感到滿意，這些選項卡在IE6/7上優雅地退化爲平方。與使用圖片相比，這是一個LOT清潔解決方案，而且比兩個瀏覽器的黑客攻擊要少得多，而這些瀏覽器在宏偉計劃中並不重要。實際上，如果一些用戶看到方形而不是圓形，那麼會有什麼損失？實際上，我必須指出一些用戶沒有注意到的區別。只是說' – bpeterson76 2011-04-14 15:10:45

爲什麼不使用jQuery UI的[選項卡]（http://jqueryui.com/demos/tabs/）？你可以使用[ThemeRoller]（http://jqueryui.com/themeroller/）來設置它們的樣式，但它們是跨瀏覽器兼容的並且很好地降級（如@ bpeterson76所述）。 – 2011-04-14 15:32:49

您可以在click事件中或在css中（最好在css中）修復此問題。點擊：

$('.selected a').css('background-color', 'white');

或CSS，像

.selected a{background-color: white;}

在你的CSS

您有：

.tabBox .tabs .selected a { 
    background: #FFF; 
}

EDIT（你的CSS行爲 'PIE.htc' 導致您的問題）：點擊結束時加入：

$(".tabBox .tabs li").click(function() { 
    $(".tabBox .tabs li").removeClass("selected"); //Remove any "active" class 
    $(this).addClass("selected"); //Add "active" class to selected tab 
    $(".tabBox .content").hide(); //Hide all tab content 
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
      $(activeTab).show(); 
//add--> 
    **$(".tabBox .tabs").find('li[class!=selected]').find('a').css('background-color', '#EEE'); 
    $(this).find('a').css('background-color', '#FFF');** 

    return false; 
});**strong text**

來源

2011-04-14 15:09:35 ChrisThompson

嗨，我改變了這一點，並讓它在firefox和chrome中正常工作，但在IE7中，每次點擊一個新選項卡時，前一個選項卡將保持白色並且不會回到灰色。 – mark33 2011-04-14 15:25:23

切換你的a：的順序和你的.selected在你的css – ChrisThompson 2011-04-14 15:35:16

我做了一些改動，新的一個在下面的頁面：http：//www.usedcar.co.uk/testtabs2.html，問題在於，在IE8中，每次點擊一個新選項卡時，以前選項卡的背景都保持白色，而不是回到灰色。 – mark33 2011-04-14 15:38:51

.tabBox .tabs a:hover, 
.tabBox .tabs a:active, 
.tabBox .tabs .selected a { 
    background: none repeat scroll 0 0 #FFFFFF; 
}

應該修復它:)

來源

2011-04-14 15:11:53 RyanP13

這裏是一個工作版本：http://jsbin.com/afina3/8/edit

了兩個變化。第一個是上面的.tabBox .tabs樣式移動所選樣式：

.tabBox .tabs .selected a { 
    background: #FFF; 
} 

.tabBox .tabs a { 
    float: left; 
    height: 3em; 
    line-height: 3em; 
    -webkit-border-radius: 4px 4px 0 0; 
    -moz-border-radius: 4px 4px 0 0; 
    border-radius: 4px 4px 0 0; 
    background: #EEE; 
    border: 1px solid #BDBDBD; 
    border-bottom: 0; 
    padding: 0px 15px; 
    color: #000; 
    font-size:12px; 
    text-decoration: none; 
    behavior: url(/pie/PIE.htc);} 
}

然後在jQuery代碼添加此線到選定的樣式添加到標籤的標籤：

$(this).find('a').addClass("selected"); //add selected style to the link of this tab

來源

2011-04-14 15:24:37

我做了一些更改，新的是在下面的頁面：http://www.usedcar.co.uk/testtabs2.html，問題是，在IE8中，每次你點擊一個新的選項卡，背景以前的選項卡保持白色，而不是回到灰色。 – mark33 2011-04-14 15:40:04

嘗試將此行添加到jQuery中以從鏈接中刪除選定的類： $（「.tabBox .tabs li a」）。removeClass（「selected」）; //刪除任何「活動」類 – 2011-04-14 16:50:24

刪除多餘的花括號它竊聽你的代碼了...

behavior: url(/pie/PIE.htc);} 
}

編輯：這裏是演示...

工作：http://jsfiddle.net/j6sF5/1

不工作：http://jsfiddle.net/j6sF5/2/（額外的大括號）

來源

2011-04-14 15:29:11 wdm

謝謝，我現在就完成了。它並沒有解決這個問題 – mark33 2011-04-14 15:36:53

jquery圓形選項卡跨瀏覽器（輕微問題）

回答

相關問題