Tuesday, 25-Apr-2017, 0:56 AM
Welcome Guest | RSS
Main » 2010 » October » 16 » Tạo các Tab nội dung - phần 3
12:55 PM
Tạo các Tab nội dung - phần 3
6. Kiểu 6

Code

<style type=text/css>

 

div.TabView div.Tabs

{

 height: 24px;

 overflow: hidden;

}

 

div.TabView div.Tabs a

{

 float: left;

 display: block;

 

 width: 90px;

 text-align: center;

 

 height: 24px;

 line-height: 28px;

 vertical-align: middle;

 

 background: url('tabs.png') no-repeat -2px -1px;

 

 text-decoration: none;

 font-family: "Times New Roman", Serif;

 font-weight: 900;

 font-size: 13px;

 color: #000080;

}

 

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

 background: url('tabs.png') no-repeat -2px -31px;

}

 

div.TabView div.Pages

{

 clear: both;

 border: 1px solid #404040;

 overflow: hidden;

}

 

div.TabView div.Pages div.Page

{

 height: 100%;

 padding: 0px;

 overflow: hidden;

}

 

div.TabView div.Pages div.Page div.Pad

{

 padding: 3px 5px;

}

</style>

 

<script type=text/javascript>

 

function tabview_aux(TabViewId, id)

{

 var TabView = document.getElementById(TabViewId);

 

 var Tabs = TabView.firstChild;

 while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

 

 var Tab = Tabs.firstChild;

 var i = 0;

 

 do

 {

 if (Tab.tagName == "A")

 {

 i++;

 Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";

 Tab.className = (i == id) ? "Active" : "";

 Tab.blur();

 }

 }

 while (Tab = Tab.nextSibling);

 

 var Pages = TabView.firstChild;

 while (Pages.className != 'Pages') Pages = Pages.nextSibling;

 

 var Page = Pages.firstChild;

 var i = 0;

 

 do

 {

 if (Page.className == 'Page')

 {

 i++;

 if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";

 Page.style.overflow = "auto";

 Page.style.display = (i == id) ? 'block' : 'none';

 }

 }

 while (Page = Page.nextSibling);

}

 

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

</script>

 

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

 

<div class="Tabs" style="width: 350px;">

 <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a>

</div>

 

<div class="Pages" style="width: 350px; height: 250px;">

 

 <div class="Page"> <div class="Pad">Nôị dung Tab 1</div> </div>

 <div class="Page"> <div class="Pad">Nôị dung Tab 2 </div> </div>

 <div class="Page"> <div class="Pad">Nôị dung Tab 3 </div> </div>

 

</div></div></form>

 

<script type="text/javascript">

 

tabview_initialize('TabView');

 

</script>




7. Kiểu 7

Hình minh họa:



Code

<style type=text/css>

.dropcontent {

DISPLAY: block

}

.tabstyle {

BORDER-RIGHT: white 3px outset; BORDER-TOP: gray 1px solid; FONT: bold 14px Arial; WIDTH: 80px; CURSOR: hand; BACKGROUND-COLOR: lightyellow

}

.tabstyle B {

MARGIN-LEFT: 3px; COLOR: blue; MARGIN-RIGHT: 23px

}

#cyclelinks2 {

MARGIN-RIGHT: 15px

}

#cyclelinks2 .tabsfootstyle {

FONT-WEIGHT: bold; MARGIN-RIGHT: 3px; BACKGROUND-COLOR: white; TEXT-DECORATION: none

}

</style>

<script type="text/javascript">

if (window.addEventListener || window.attachEvent){

document.write('<style type="text/css">\n')

document.write('.dropcontent{display:none;}\n')

document.write('</style>\n')

}

var showrecords=2 //specify number of contents to show per tab

var tabhighlightcolor="yellow" //specify tab color when selected

var taboriginalcolor="lightyellow" //specify default tab color. Should echo your CSS file definition.

document.getElementsByClass=function(tag, classname){

var tagcollect=document.all? document.all.tags(tag): document.getElementsByTagName(tag) //IE5 workaround

var filteredcollect=new Array()

var inc=0

for (i=0;i<tagcollect.length;i++){

if (tagcollect[i].className==classname)

filteredcollect[inc++]=tagcollect[i]

}

return filteredcollect

}



function contractall(){

var inc=0

while (contentcollect[inc]){

contentcollect[inc].style.display="none"

inc++

}

}


function expandone(whichpage){

var lowerbound=(whichpage-1)*showrecords

var upperbound=(tabstocreate==whichpage)? contentcollect.length-1 : lowerbound+showrecords-1

contractall()

for (i=lowerbound;i<=upperbound;i++)

contentcollect[i].style.display="block"

}


function highlightone(whichtab){

for (i=0;i<tabscollect.length;i++){

tabscollect[i].style.backgroundColor=taboriginalcolor

tabscollect[i].style.borderRightColor="white"

tabsfootcollect[i].style.backgroundColor="white"

}

tabscollect[whichtab].style.backgroundColor=tabhighlightcolor

tabscollect[whichtab].style.borderRightColor="gray"

tabsfootcollect[whichtab].style.backgroundColor="#E8E8E8"

}


function generatetab(){

contentcollect=document.getElementsByClass("p", "dropcontent")

tabstocreate=Math.ceil(contentcollect.length/showrecords)

linkshtml=""

linkshtml2=""

for (i=1;i<=tabstocreate;i++){

linkshtml+='<span class="tabstyle" onClick="expandone('+i+');highlightone('+(i-1)+')"><b>Page '+i+'</b></span>'

linkshtml2+='<a href="#" class="tabsfootstyle" onClick="expandone('+i+');highlightone('+(i-1)+');return false">Page '+i+'</a> '

}

document.getElementById("cyclelinks").innerHTML=linkshtml

document.getElementById("cyclelinks2").innerHTML=linkshtml2

tabscollect=document.getElementsByClass("span", "tabstyle")

tabsfootcollect=document.getElementsByClass("a", "tabsfootstyle")

highlightone(0)

expandone(1)

}


if (window.addEventListener)

window.addEventListener("load", generatetab, false)

else if (window.attachEvent)

window.attachEvent("onload", generatetab)

</script>

<div id="cyclelinks"></div>


<p class="dropcontent">


Content 1 here.


</p>


<p class="dropcontent">


Content 2 here.


</p>


<p class="dropcontent">


Content 3 here.


</p>


<div id="cyclelinks2" align="right"></div>




8. Kiểu 8

Code

<script language='javascript' src='http://all4u.dmon.com/Js/dom_tab.js' type='text/javascript'/>
<style type=text/css>
div.domtab {
padding:0;
width:500px; /*độ rộng của tab*/
font-size:90%; /*cỡ chữ của tab*/
}
ul.domtabs
{
float:left;
width:100%;
margin:0;
list-style:none;
padding-left: 0;
}
ul.domtabs li
{
float:left;
padding:0px 1px 0px 0px;
text-align: center;
}
ul.domtabs a{
padding:5px;
display:block;
background:#999; /*màu nền của thư mục trong tab*/
color: #fff; /*màu text của thư mục trong tab*/
height:1em;
font-weight:bold;
text-decoration:none;
}

ul.domtabs a:hover{
color: #0000ff; /*màu text của thư mục trong tab khi rê chuột*/
background:#ccc; /*màu nền của thư mục trong tab khi rê chuột*/
}
div.domtab div {
clear:both;
width:auto;
padding:0 2px;
margin: 0 0 1em 0;
}

div.domtab div {display: block; clear: both;}
</style>
<div class='domtab'><ul class='domtabs'>

<li><a href='#noidung1'>Nội dung 1</a></li>
<li><a href='#noidung2'>Nội dung 2</a></li>
<li><a href='#noidung3'>Nội dung3</a></li>

</ul>
<div style='padding:3px; border: 2px solid #ccc;'>
<a id='noidung1' name='noidung1'></a>
<div class='tab_content_1'>
Nội dung 1
</div></div>

<div style='padding:3px;display:none;border: 2px solid #ccc;'>
<a id='noidung2' name='noidung2'></a>
<div class='tab_content_2'>
Nội dung 2
</div></div>

<div style='padding:3px;display:none;border: 2px solid #ccc;'>
<a id='noidung3' name='noidung3'></a>
<div class='tab_content_3'>
Nội dung 3
</div></div>

</div>




Category: Tab Content | Views: 741 | Added by: all4u | Rating: 0.0/0
Total comments: 3
3  
Auto-start my profile music <a href="http://ikhrpfgp.com">pleyar</a> when visitors come to my profile. Allow Auto-start of other people's profile and artist music <a href="http://ikhrpfgp.com">pleyar</a>s.When I have the Personal Pop-up Music Player open, do not auto-start other <a href="http://ikhrpfgp.com">pleyar</a>s. You wanna click The first one. Then your myspace music <a href="http://ikhrpfgp.com">pleyar</a> should automatically start.

2  
開発中のためアップはできないのですが使用しているコードを以下に記載します。■使用ジャバスクリプト(別ファイルにして読み込んでいます)$(function() { var n = window.location.href.slice(window.location.href.indexOf( ?') + 4); $( .content_wrap ).addClass( disonn'); $( .content_wrap ).eq(n).removeClass( disonn'); $( #tab li ).removeClass( select'); $( #tab li ).eq(n).addClass( select') $( #tab li ).click(function() { var num = $( #tab li ).index(this); $( .content_wrap ).addClass( disonn'); $( .content_wrap ).eq(num).removeClass( disonn'); $( #tab li ).removeClass( select'); $(this).addClass( select') }); });■スタイルシート(別ファイルにして読み込んでいます)#sample { margin-top: 20px;}#tab li {float: left;padding: 10px;list-style: none;cursor: pointer;width: 90px;font-size: 10px;margin-right: 6px;background-image: url(../img_common/page-tab-bg.gif);border-top-width: 1px;border-top-style: solid;border-top-color: #CC0000;height: 12px;}#tab li.select {background-image: url(../img_common/page-tab-bg-h.gif);}.disnon {display: none;}.content_wrap { clear: left; width: 470px;}■HTML(タブページ)ご発注方法ご発注の流れ受注確定についてご注文時のご注意印刷内容についてお届けについて翌日到着範囲の目安出荷日について特急仕上げサービス内 容1内容2内容3内容4■HTML(リンクページ)

1  
Thanks for contributing. It's helped me understand the isuess.

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page