เทคนิคทำกล่อง Tab ง่ายๆแต่ดูดี

หากใครที่เคยเข้าเว็บบางแห่ง จะเห็นได้ว่าที่หน้าแรกของเค้านั้น มี tab เป็นกล่องอยู่ให้เราจิ้มๆเอาได้ว่าจะ เลือกกล่องไหน โดยที่ไม่มีการเปลี่ยนหน้าเลย อธิบายมากเดี๋ยวจะงง ที่กำลังพูดอยู่มันคือ เจ้านี่

หรือที่หน้าเว็บ MeeWebFree.com ใช้งานอยู่นั่นเอง เอาล่ะครับ สำหรับวิธีการทำนั้นไม่ยากเพราะเราได้ผู้ช่วยมือดี คือ google นั่นเอง ให้มาได้ดังนี้ http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm เราก็จัดการทำตามที่เค้าบอกเลย เค้าบอกว่า

1.เอาโค้ดด้านล่างนี้ไปใส่ใน Head ของ HTML
<link rel="stylesheet" type="text/css" href="tabcontent.css" />

<script type="text/javascript" src="tabcontent.js">

/***********************************************
* Tab Content script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

2.โหลดไฟล์นี้ไปแล้ววางในแฟ้มเดียวกันกับหน้าเว็บ

3.เอาโค้ดนี้ไปวางตรงตำแหน่งที่ต้องการให้แสดงผล
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: expandtab('maintab', 3)">Click here to select 4th tab</a></b></p>
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>

เสร็จแล้วจ้า ที่เหลือก็ตกแต่งตามแต่ใจชอบเลยคร้าบ