我遇到了java/css選項卡式菜單系統的難題。我已經將菜單啓動並運行了一段時間，但最近我嘗試在其中一個頁面上添加一個新的製圖系統，並且我一直難以正確顯示它。在網站加載上運行javascript
我已將它追溯到需要的css條目，以防止顯示所有選項卡式內容，直到您將鼠標懸停在每個選項卡上。 CSS是如下：
div.tabscontainer div.curvedContainer .tabcontent{
display:none;
padding:20px;
font-size:12px;
font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}
至於說，該顯示：沒有阻止所有的內容被顯示，直到你將鼠標懸停在標籤之一。但是，相同的顯示：無法阻止我的圖表腳本正確繪製圖表。如果我評論顯示：沒有顯示，則圖表正確繪製，但所有選項卡式內容顯示在頁面加載中。排序抓的22
但是，如果我不註釋掉顯示：無，然後將鼠標懸停在任何菜單選項卡，下面的JavaScript運行和所有相應的內容是否正確隱藏或顯示要求：
<script language="JavaScript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").hover(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
我可以理解腳本是以僞代碼的方式做什麼的，它改變了選項卡本身的屬性（添加/刪除「選定的類」），以允許它出現「突出顯示」，同時更改內容容器的屬性（添加/刪除顯示：無或塊）以隱藏或顯示適用的每個選項卡的內容。
我現在的想法是，如果我添加上述腳本的修改版本來運行頁面加載並自動選擇第一個選項卡，那麼我可以從CSS中刪除全局顯示：none，只允許javascript整理出來。
最後，這導致了我的問題。我仍然對JavaScript不熟悉，我正試圖弄清楚如何修改上述代碼，以反映我需要它在頁面加載時自動選擇給定菜單（tab_menu_50），同時仍允許用戶將鼠標懸停在任何位置標籤。
任何你可以給的指針都很樂意接受，如果上面沒有任何意義，我提前道歉！ （雖然，如果你能告訴我，我已經得到了它完全錯誤的，我會很感激的，太多！）
喬納森
試過刪除所有內容，但仍給該網站的想法結構，希望這有助於找到答案。可能有一些錯誤的標籤但是這只是因爲黑客的工作，我剛剛做了，讓我張貼在這裏的一些HTML的...
<html>
<head>
# Below script enables tab switch on mouseover
<script language="JavaScript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").hover(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
# Below script draws the chart
<script type="text/javascript">
$(function(){
$('.charttable').visualize({type: 'line'});
});
</script>
<style>
# Below style sheet contains the problematic entry of display:none
div.tabscontainer div.curvedContainer .tabcontent{
display:none;
padding:20px;
font-size:12px;
font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}
</head>
<body>
<div class="tabscontainer">
<div class="tabs">
<div class="tab first selected" id="tab_menu_50">
<div class="link">Home</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_150">
<div class="link">Screen2</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_250">
<div class="link">Screen3</div>
<div class="arrow"></div>
</div>
</div>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_50">
</div>
<div class="tabcontent" id="tab_content_150">
</div>
<div class="tabcontent" id="tab_content_250">
<table class="charttable">
<caption>Visits from August 16 to August 21</caption>
<thead>
<tr>
<td></td>
<th scope="col">chartlabel1</th>
<th scope="col">chartlabel2</th>
<th scope="col">chartlabel3</th>
<th scope="col">chartlabel4</th>
<th scope="col">chartlabel5</th>
<th scope="col">chartlabel6</th>
<th scope="col">chartlabel7</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">SuiteA</th>
<td>54</td>
<td>49</td>
<td>52</td>
<td>61</td>
<td>44</td>
<td>57</td>
<td>61</td>
</tr>
<tr>
<th scope="row">SuiteB</th>
<td>12</td>
<td>11</td>
<td>5</td>
<td>13</td>
<td>11</td>
<td>10</td>
<td>9</td>
</tr>
<tr>
<th scope="row">SuiteC</th>
<td>73</td>
<td>67</td>
<td>64</td>
<td>74</td>
<td>61</td>
<td>73</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
當你說'自動選擇第一個tab'，什麼是「選擇第一個選項卡」？ – adamdehaven
這將有助於如果你可以張貼一些'HTML' .. –
謝謝你的回覆 - AdamD - 對不起，我的意思是自動選擇標籤，就好像用戶在它上面一樣。將嘗試和張貼一些HTML現在... – user2000718