เปลี่ยน id ของ div #tab เป็นชื่ออื่น เช่น <div id="tab-2"> แล้วเพิ่ม css ของส่วนที่อยู่ใน #tab-2 โดยให้ระบุ id ของ div ด้วย
เช่น #tab-2 .ui-tabs .ui-tabs-nav { margin: 0; padding: 1px 1px 0; float:none; }
อธิบายคร่าวๆ ไม่รู้ว่างงมั้ยนะครับ
ขอบคุณมกาๆครับ 1 ให้แล้วนะ
ลองแก้ได้เป็นแบบนี้ดู ผมเข้าใจถูกแล้วยังครับครับ
JS
<script type="text/javascript">
$(function() {
$( "#tabsTWO" ).tabs({ selected: 0 });
});
</script>
HTML
<div id="tabsTWO">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Tab1 content</p>
</div>
<div id="tabs-2">
<p>Tab2 content</p>
</div>
<div id="tabs-3">
<p>Tab3 content</p>
</div>
</div>
css
#tabsTWO .ui-tabs { width:600px; position: relative; padding: 1px; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
#tabsTWO .ui-tabs .ui-tabs-nav { margin: 0; padding: 1px 1px 0; float:none; }
#tabsTWO .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 1px 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
#tabsTWO .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
#tabsTWO .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px;}
#tabsTWO .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; background-color:#EEEEEE;}
#tabsTWO .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; background-color:#CCCCCC; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
#tabsTWO .ui-tabs .ui-tabs-panel { width: 600px; display: block; border-width: 0; padding: 4px; background-color:#EEEEEE; text-align:left; }
#tabsTWO .ui-tabs .ui-tabs-hide { display: none !important; }
พัฒนาเว็บไซต์
