Tab Content 4 - 29 December 2010 - All 4 You
Monday, 23-Jan-2017, 2:18 AM
Welcome Guest | RSS
Main » 2010 » December » 29 » Tab Content 4
9:20 AM
Tab Content 4
 


Code
<link href="http://all4u.dmon.com/CSS/tabcontent10.css" rel="stylesheet" type="text/css" media="screen"> 
<script language="javascript" type="text/javascript" src="http://www.cssnewbie.com/js/jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://www.cssnewbie.com/js/jquery/jquery.equalheights.js"></script>
<script type="text/javascript" src="http://all4u.dmon.com/Js/tabcontent10.js"> </script>

<div id="wrap">
<div class="tabbed-box">
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="tabbed-content"><p>ND 1</p></div>
<div class="tabbed-content"><p>ND 3</p></div>
<div class="tabbed-content"><p>ND 4</p></div>
</div></div>

Để thay đổi width của Tab content, bạn hay down file css về và sửa như sau:

- Thay đổi width từng tab --> thay đổi width ở phần .tabbed-box .tabs li a
- Thay đổi width của cả Tab (nếu bạn thêm tab thì cũng nên thay đổi phần này, nếu không sẽ bị chèn lên nhau trông rất xấu bạn nhé) --> thay đổi width ở .tabbed-box. Ở đây bạn cũng chú ý, trong file css có sẵn ở đây có 3 tab, mỗi tab width là 100px, và width  của cả Tab Content là 302 px. Do vậy, nếu thêm Tab, bạn hãy chú ý thay đổi width cho phù hợp nhé.




Code
<link href="http://all4u.dmon.com/CSS/tabcontent11.css" rel="stylesheet" type="text/css" media="screen">
<script language="javascript" type="text/javascript" src="http://all4u.dmon.com/Js/tabcontent11.js"></script>

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:230px;">
<div id="pettabs" class="indentmenu">

<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>

</ul>
<br style="clear: left"/>
</div>

<div style="width:150px;text-align:justify;padding: 5px; margin-bottom:1em">

<div id="tab1" class="tabcontent"><img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="150" src="1.jpg?imgmax=800" height="230" title="sunset"/></a>
<p><h3><a href="Link 1">Title 1</a></h3></p>ND 1</div>

<div id="tab2" class="tabcontent"><a href="link 2"><img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="150" src="2.jpg?imgmax=800" height="230" title="Chú thích 2"/></a><p><h3><a href="Link 2">Title 2</a></h3></p>ND 2</div>

<div id="tab3" class="tabcontent"><a href="link 3"><img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="150" src="3.jpg?imgmax=800" height="230" title="Chú thích 3"/></a><p><h3><a href="Link 3">Title 3</a></h3></p>ND 3</div>

<div id="tab4" class="tabcontent"><a href="Link 4"><img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="150" src="4.jpg?imgmax=800" height="230" title="Chú thích 4"/></a><p><h3><a href="link 4">Title 4</a></h3></p>ND 4</div> </div>

<script type="text/javascript">

    var mypets=new ddtabcontent("pettabs")
    mypets.setpersist(true)
    mypets.setselectedClassTarget("link")
    mypets.init(2100)

 </script>
 






Code
<link href="http://all4u.dmon.com/CSS/tabcontent12.css" rel="stylesheet" type="text/css" media="screen"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://all4u.dmon.com/Js/tabcontent12.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tab-left').tabify();
});
</script>

<div class="tab-container">

<div id="tab-left">
<ul>
<li class="active"><a href="#tab1"><img src="1.jpg" width="150" height="75" alt="" /><br />Tab 1</a></li>
<li><a href="#tab2"><img src="2.jpg" width="150" height="75" alt="" /><br />Tab 2</a></li>
<li><a href="#tab3"><img src="3.jpg" width="150" height="75" alt="" /><br />Tab 3</a></li>
</ul>
</div><!-- end "tab-left" -->

<div id="tab1" class="box"><h3>Title 1</h3><p>ND 1</p></div>
<div id="tab2" class="box"><h3>Title 2</h3><p>ND 2</p></div>
<div id="tab3" class="box"><h3>Title 3</h3><p>ND 3</p></div>
</div>
 

Thay đổi width, và đường viền boder của Container --> sửa file css:

- Width của toàn bộ Tab Content: .tab-container{
- Width của tab bên trái: #tab-left{
- Width của box hiển thị nội dung của tab: .box{
- Chú ý: Khi thay đổi width của tab left, và box thì cần phải thay đổi tb container cho phù hợp

Category: Tab Content | Views: 1638 | Added by: Jinn | Rating: 5.0/1
Total comments: 1
1  
good!

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