 | Bài viết này cung cấp một mã nguồn đơn giản với mẫu thiết kế nền xám giản đơn, sẽ giúp bạn dễ dàng xây dựng và thiết kế cho mình một bộ giao diện các thẻ DIV ẩn hiện trong HTML phục vụ cho Website hoặc Blog của mình. |
Demo:
HTML Page Source - Mã Trang HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - Simple multi-tab hide/show DIV gray background source code.</title>
<style type="text/css">
#sel1{
cursor:pointer;
background-color:rgb(200,200,200);
padding-left:13px;
padding-right:13px;
}
#sel2{
cursor:pointer;
background-color:rgb(150,150,150);
padding-left:13px;
padding-right:13px;
}
#sel3{
cursor:pointer;
background-color:rgb(150,150,150);
padding-left:13px;
padding-right:13px;
}
#resultsel1{
display:block;
position:relative;
bottom:1px;
width:100%;
height:30px;
background-color:rgb(200,200,200);
}
#resultsel2{
display:none;
position:relative;
bottom:1px;
width:100%;
height:30px;
background-color:rgb(200,200,200);
}
#resultsel3{
display:none;
position:relative;
bottom:1px;
width:100%;
height:30px;
background-color:rgb(200,200,200);
}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
}//]]>
</script>
</head>
<body>
<script>
var selected="sel1";
var disp="resultsel1";
function show(a,b)
{
document.getElementById(selected).style.backgroundColor = "rgb(150,150,150)";
document.getElementById(disp).style.display = "none";
document.getElementById(a).style.backgroundColor = "rgb(200,200,200)";
document.getElementById(b).style.display = "block";
selected=a;
disp=b;
}
</script>
<div width="100%">
<span id="sel1" onclick="show('sel1','resultsel1');">home</span><span id="sel2" onclick="show('sel2','resultsel2');">div1</span><span id="sel3" onclick="show('sel3','resultsel3');">div2</span>
</div>
<div id="resultsel1">VNLIVES.NET - Welcome to my site.</div>
<div id="resultsel2">Nice to meet you.</div>
<div id="resultsel3">Thank you vist my site.</div>
</body></html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - Simple multi-tab hide/show DIV gray background source code.</title>
<style type="text/css">
#sel1{
cursor:pointer;
background-color:rgb(200,200,200);
padding-left:13px;
padding-right:13px;
}
#sel2{
cursor:pointer;
background-color:rgb(150,150,150);
padding-left:13px;
padding-right:13px;
}
#sel3{
cursor:pointer;
background-color:rgb(150,150,150);
padding-left:13px;
padding-right:13px;
}
#resultsel1{
display:block;
position:relative;
bottom:1px;
width:100%;
height:30px;
background-color:rgb(200,200,200);
}
#resultsel2{
display:none;
position:relative;
bottom:1px;
width:100%;
height:30px;
background-color:rgb(200,200,200);
}
#resultsel3{
display:none;
position:relative;
bottom:1px;
width:100%;
height:30px;
background-color:rgb(200,200,200);
}
</style>
<script type="text/javascript">//<![CDATA[
window.onload=function(){
}//]]>
</script>
</head>
<body>
<script>
var selected="sel1";
var disp="resultsel1";
function show(a,b)
{
document.getElementById(selected).style.backgroundColor = "rgb(150,150,150)";
document.getElementById(disp).style.display = "none";
document.getElementById(a).style.backgroundColor = "rgb(200,200,200)";
document.getElementById(b).style.display = "block";
selected=a;
disp=b;
}
</script>
<div width="100%">
<span id="sel1" onclick="show('sel1','resultsel1');">home</span><span id="sel2" onclick="show('sel2','resultsel2');">div1</span><span id="sel3" onclick="show('sel3','resultsel3');">div2</span>
</div>
<div id="resultsel1">VNLIVES.NET - Welcome to my site.</div>
<div id="resultsel2">Nice to meet you.</div>
<div id="resultsel3">Thank you vist my site.</div>
</body></html>
No comments:
Post a Comment