3 つのタブを持つ Jquery UI アコーディオンを作成しました。ヘッダー テキストは、Internet Explorer を除くすべてのブラウザーで表示されます。ヘッダーとは、PTZ コントロール、レンズ コントロール、ビデオ コントロールを意味します。
誰か助けてくれませんか？以下は、関連するコードの一部です。
HTML :
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<link href="css/jquery-ui-1.10.0.custom.css" rel="stylesheet">
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.accordion.js"></script>
<script src="js/jquery-ui-1.10.0.custom.js"></script>
<div id='accordion' style='width:200px;height:440px'>
<h3>PTZ Control</h3>
<table style='width:200px;'>
<tr>
<td align='center'>
<img src='ptz_plain.gif' usemap='#ptzcontrol' border='0' height='100px' width='100px'>
<map name='ptzcontrol'>
<area shape='circle' coords='29,29,10' onmousedown="ptzmove('pelcoptzpanlefttiltup')" onmouseup="ptzmove('pelcoptzstop')" onmouseout="ptzmove('pelcoptzstop')">
<area shape='circle' coords='51,19,10' onmousedown="ptzmove('pelcoptztiltup')" onmouseup="ptzmove('pelcoptzstop')" onmouseout="ptzmove('pelcoptzstop')">
<area shape='circle' coords='73,29,10' onmousedown="ptzmove('pelcoptzpanrighttiltup')" onmouseup="ptzmove('pelcoptzstop')" onmouseout="ptzmove('pelcoptzstop')">
<area shape='circle' coords='83,50,10' onmousedown="ptzmove('pelcoptzpanright')" onmouseup="ptzmove('pelcoptzstop')" onmouseout="ptzmove('pelcoptzstop')">
<area shape='circle' coords='74,70,10' onmousedown="ptzmove('pelcoptzpanrighttiltdown')" onmouseup="ptzmove('pelcoptzstop')" onmouseout="ptzmove('pelcoptzstop')">
<area shape='circle' coords='51,81,10' onmousedown="ptzmove('pelcoptztiltdown')" onmouseup="ptzmove('pelcoptzstop')" onmouseout="ptzmove('pelcoptzstop')">
<area shape='circle' coords='29,70,10' onmousedown="ptzmove('pelcoptzpanlefttiltdown')" onmouseup="ptzmove('pelcoptzstop')" onmouseout="ptzmove('pelcoptzstop')">
<area shape='circle' coords='20,49,10' onmousedown="ptzmove('pelcoptzpanleft')" onmouseup="ptzmove('pelcoptzstop')" onmouseout="ptzmove('pelcoptzstop')">
<area shape='circle' coords='53,40,25'>
</map>
</br>
<img src='zoomin.gif' width=30 border=0 height=30 alt='+' onmousedown="ptzmove('hawkzoomin')" onmouseup="ptzmove('hawkzoomstop')" onmouseout="ptzmove('hawkzoomstop')">
<img src='zoomout.gif' width=30 border=0 height=30 alt='-' onmousedown="ptzmove('hawkzoomout')" onmouseup="ptzmove('hawkzoomstop')" onmouseout="ptzmove('hawkzoomstop')">
</td>
<td>
<div id='slider-range-min'></div>
</td>
</tr>
<tr>
<td align='center' colspan='2'>
</br>
<fieldset>
<legend>Preset</legend>
<select id='preset_list'></select>
</br>
<button style='width:auto;' type='button' onclick='call_preset()'>Call</button>
<button style='width:auto;' type='button' onclick='save_preset()'>Save</button>
<button style='width:auto;' type='button' onclick='del_preset()'>Delete</button>
</fieldset>
</td>
</tr>
<tr>
<td colspan='2' align='center'>
</fieldset>
<fieldset>
<legend>Advance Controls</legend>
<button style='width:140px;' type='button' onclick="OpenWin('pattern.htm','700','500')">Gaurd Tour</button>
</br>
<button style='width:140px;' type='button' onclick="dothis('pelcoptzsetzero')">Set Azimuth Zero</button>
</br>
<button style='width:140px;' type='button' onclick="dothis('pelcoptzflip180')">Flip 180</button>
</br>
<button style='width:140px;' type='button' onclick="dothis('pelcoptzwiper')">Start Wiper</button>
</fieldset>
<td>
</tr>
</table>
<h3>Lens Controls</h3>
<div>
<table align='center' style='border-spacing: 6px;'>
<tr>
<td>Aperture:</td>
<td>
<button type='button' style='width:20px;' onclick="control_aperture('minus')">-</button>
<input type='text' style='width:30px;' disabled id='aperture_val'>
<button type='button' style='width:20px;' onclick="control_aperture('plus')">+</button>
</td>
</tr>
<tr>
<td>Focus:</td>
<td>
<button style='width:36px' onclick="control_focus('near')" onmouseup="control_focus('stop')" onmouseout="control_focus('stop')">Near</button>
<button style='width:36px' onclick="control_focus('far')" onmouseup="control_focus('stop')" onmouseout="control_focus('stop')">Far</button>
</td>
</tr>
<tr>
<td>Digital Zoom:</td>
<td>
<input type='checkbox' id='digitalzoom'>
</td>
</tr>
<tr>
<td>IRIS:</td>
<td>
<div style='width:80px;' id='slider_iris'>
</td>
</tr>
<tr>
<td>Auto IRIS:</td>
<td>
<input type='checkbox' id='autoiris'>
</td>
</tr>
</table>
</div>
<h3>Video Controls</h3>
<div>
<table align='center' style='border-spacing: 10px;'>
<tr>
<td>Brightness:</td>
<td>
<div style='width:80px;' id='slider_brightnes'></div>
</td>
</tr>
<tr>
<td>WDR:</td>
<td>
<input type='checkbox' id='wdr'>
</td>
</tr>
</table>
</div>
</div>
JS :
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
animate: false,
active: 0
});
});