Ẩn/Hiện tab nội dung (Version 2) - Wap giải Trí
vietnamese Tiếng Việt english English
Hôm nay: Thứ Sáu, ngày 16 tháng 05 năm 2025
Home »

Ẩn/Hiện tab nội dung (Version 2)

[FD's BlOg] - Đây là một thủ thuật cải tiến từ thủ thuật "Tạo tiện ích đóng mở tab nội dung" (thực hiện online trên website flooble.com). Bài viết này sẽ thực hiện lại thủ thuật đó trực tiếp trên blog của bạn mà không cần thông qua web trung gian.
Xem demo trực tiếp ở đây : http://fandung.110mb.com/test/hide-show-tabcontent.html


Hình minh họa


☼ Bắt đầu thực hiện thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chèn đọan code bên dưới vào trước thẻ đóng </head>


<script language="javascript">

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else {
return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d =
getObject(divId);
if (lText == '+') { link.innerHTML = '-'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }


</script>

<style type="text/css">

.expandtitle{
background-color: #999;
color:#000;
padding-left:5px;
width: 300px;
}

.expandcontent{
background-color: #ccc;
color: #000;
width: 300px;
}

</style>
- Thay đổi độ rộng (width: 300px;) cho phù hợp với sidebar của bạn.

5. Save template.
6. Tạo widget HTML/Javascript và dán code HTML bên dưới vào:

<div class="expandtitle" >
<table border="0" cellspacing="0" cellpadding="2" width="100%">

<tr>
<td> Title widget (tiêu đề của widget) </td>

<td align="right">
[<a title="show/hide" id="expand_link" href="javascript:
void(0);" onclick="toggle(this, 'expand');">&#8722;</a>]
</td>

</tr>

</table>
</div>


<div id="expand" style="padding: 3px;" class="expandcontent" >

{YOUR WIDGET CONTENT} (nội dung của widget)

</div>

<script language="javascript">toggle(getObject('expand_link'),
'expand');</script>


Chúc các bạn thành công.
Tags: ,

Comments[ 0 ]


Đăng nhận xét