มือใหม่เรื่อง jquery ครับ ตอนนี้กำลังใส่ tab widget ในหน้าเว็บ โดยใช้โค้ดนี้
JS
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs({ selected: 0 });
});
</script>
HTML
<div id="tabs">
<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>

global css
.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") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: 1px 1px 0; float:none; }
.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; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px;}
.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;}
.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... */
.ui-tabs .ui-tabs-panel { width: 600px; display: block; border-width: 0; padding: 4px; background-color:#EEEEEE; text-align:left; }
.ui-tabs .ui-tabs-hide { display: none !important; }

ใส่โค้ดทั้งหมดนี้ลงในหน้าเว็บก็ใช้งานได้ดีครับ ทีนี้อยากจะใส่ tab ลงในหน้าเดียวกัน 2 อัน แล้วทำให้สองอันใช้ css คนละชุดกัน มันทำยังไงอ่ะครับ ขอตัวอย่างละเอียดได้ก็ดี ขอบคุณครับ

 

 

เปลี่ยน 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; }

อธิบายคร่าวๆ ไม่รู้ว่างงมั้ยนะครับ 

อ้างถึงจาก: pugler ใน 23 สิงหาคม 2011, 21:37:18
เปลี่ยน 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; }


อ้างถึงจาก: หนึ่งสุดหล่อ ใน 23 สิงหาคม 2011, 21:43:07

อ้างถึงจาก: pugler ใน 23 สิงหาคม 2011, 21:37:18
เปลี่ยน 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; }


tab ที่สองก็ประมาณนั้นล่ะครับ ใช้ได้รึยังครับผม

ได้ความรู้ด้วยครับ ขอบคุณครับ