我遇到了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