<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | ایجاد پنل چند سربرگی در وب</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
.tabbed-container{
position:relative;
margin-top:12px;
border:1px solid #FFF;
}
.tabbed-menu{
margin-top:0px;
margin-bottom:0px;
line-height:14px;
position:absolute;
}
.tabbed-wrapper{
border:1px solid #E5E5E5;
margin-top:25px;
margin-bottom:12px;
padding:12px;
}
.tabbed-button{
display:inline-block;
height:16px;
width:auto;
padding:4px;
margin:0px;
background:#F9F9F9;
border-radius:5px 5px 0px 0px;
-webkit-border-radius:5px 5px 0px 0px;
border:1px #E5E5E5 solid;
border-bottom:1px #E5E5E5 solid;
cursor:pointer;
color:#999;
}
.tabbed-button:hover{
background:#F5F5F5;
color:#999;
}
.tabbed-button-open{
display:inline-block;
height:16px;
width:auto;
padding:4px;
margin:0px;
background:#FFF;
border-radius:5px 5px 0px 0px;
-webkit-border-radius:5px 5px 0px 0px;
border:1px #E5E5E5 solid;
border-bottom:1px #FFF solid;
color:#000;
}
</style>
<script type="text/javascript">
function closeBox(num){
//بستن تمام باکس ها در اولین بارگذاری
for(var i = 1; i <= num; i++){
document.getElementById("tabbed-box-" + i).style.display = "none";
}
}
function openSelected(button, box){
//باز کردن باکس انتخاب شده در اولین بارگذاری
document.getElementById(button).className = ("tabbed-button-open");
document.getElementById(box).style.display = "block";
}
function openBox(button, box, num){
var tabbed_div = document.getElementById(box).style.display;
//بستن تمام باکس ها و باز کردن باکس انتخاب شده
if(tabbed_div != "block"){
for(var i = 1; i <= num; i++){
document.getElementById("tabbed-box-" + i).style.display = "none";
document.getElementById("tabbed-button-" + i).className = ("tabbed-button");
}
document.getElementById(button).className = ("tabbed-button-open");
document.getElementById(box).style.display = "block";
}
}
</script>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است یا پشتیبانی نمی شود!</noscript>
<div class="tabbed-container">
<div class="tabbed-menu">
<div class="tabbed-button" id="tabbed-button-1" onclick="openBox(this.id, 'tabbed-box-1', 4);">تیتر دکمه 1</div>
<div class="tabbed-button" id="tabbed-button-2" onclick="openBox(this.id, 'tabbed-box-2', 4);">تیتر دکمه 2</div>
<div class="tabbed-button" id="tabbed-button-3" onclick="openBox(this.id, 'tabbed-box-3', 4);">تیتر دکمه 3</div>
<div class="tabbed-button" id="tabbed-button-4" onclick="openBox(this.id, 'tabbed-box-4', 4);">تیتر دکمه 4</div>
</div>
<div class="tabbed-wrapper">
<div id="tabbed-box-1">محتوای باکس 1</div>
<div id="tabbed-box-2">محتوای باکس 2</div>
<div id="tabbed-box-3">محتوای باکس 3</div>
<div id="tabbed-box-4">محتوای باکس 4</div>
</div>
</div>
<script type="text/javascript">
//بستن تمام باکس ها در اولین بارگذاری
closeBox(4);
//باز کردن باکس انتخاب شده در اولین بارگذاری
openSelected("tabbed-button-1", "tabbed-box-1");
</script>
<hr>
با اندکی آشنایی با CSS و JavaScript می توانید پنل را به صورت سفارشی ویرایش کنید.
</body>
</html>
.png)
