java/cssタブ付きメニューシステムで問題が発生しています。しばらくの間メニューを起動して実行していましたが、最近、ページの1つに新しいグラフ作成システムを追加しようとしましたが、正しく表示するのが難しいと感じています。
各タブにカーソルを合わせるまですべてのタブ付きコンテンツが表示されないようにするために必要なcssエントリまで追跡しました。CSSは次のとおりです。
div.tabscontainer div.curvedContainer .tabcontent{
display:none;
padding:20px;
font-size:12px;
font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}
前述のように、display：noneは、タブの1つにカーソルを合わせるまで、すべてのコンテンツが表示されるのを防ぎます。ただし、同じdisplay：noneを使用すると、グラフ作成スクリプトでグラフを正しく描画できなくなります。display：none outをコメント化すると、グラフは正しく描画されますが、ページの読み込み時にすべてのタブ付きコンテンツが表示されます。キャッチ22のようなもの。
ただし、display：noneをコメントアウトしてから、メニュータブのいずれかにカーソルを合わせると、次の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>
スクリプトが疑似コードで何をしているのかを理解できます。タブ自体のプロパティを変更して（「選択したクラス」を追加/削除）、のプロパティを変更しながら「強調表示」されているように見せることができます。必要に応じて、各タブのコンテンツを非表示または表示するコンテンツコンテナ（display：noneまたはblockの追加/削除）。
私の考えでは、上記のスクリプトの修正バージョンを追加してページの読み込み時に実行し、最初のタブを自動的に選択すると、CSSからグローバルdisplay：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>