7.6.19 |
0
nhận xét
| lượt xem
Bài viết này mình sẽ hướng dẫn làm cách nào để tạo các tab chuyển đổi qua lại nội dung sử dụng CSS và Javascript với hiệu ứng mềm mại

Cấu trúc code để hiển thị nội dung và các tabs
<div id="tabtvl">
<div class="tab-menu-tvl">
<ul id="tebslecttvl">
<li class="tab1z">
<a href="#xtabx1">Tab 1</a>
</li>
<li class="tab2z">
<a href="#xtabx2">Tab 2</a>
</li>
</ul>
</div>
<div id="sidetvl">
<div class="widget1xx" id="xtabx1">
Nội dung tab 1
</div>
<div class="widget1xx" id="xtabx2">
Nội dung tab 2
</div>
</div>
</div>
CSS
#tabtvl{margin:0 0 15px}
ul#tebslecttvl,ul#tebslecttvl li{padding:0;margin:0;list-style:none;overflow:hidden}
ul#tebslecttvl li{float:left}
ul#tebslecttvl a{display:block;margin:0 5px 0 0;line-height:30px;padding:0 10px;background:#E9D3D3;border-radius:3px 3px 0 0;font-weight:bold}
ul#tebslecttvl li.active a,ul#tebslecttvl a:hover{background:#E6E6E6;color:black}
#sidetvl{padding:10px;background:#E6E6E6;border-radius:0 3px 3px;}
0
nhận xét