tab control

N.NK

N.NK

عضو جدید
سلام
من میخوام یه سایت با ASP طراحی کنم که شامل tab Control باشه ولی نمیدونم چطوری میشه tab Control ایجاد کرد ممنون میشم راهنماییم کنید.
;)
 
heil

heil

عضو جدید
سلام

این کار با جاوا اسکریپت به راحتی قابل انجام است.

روش کار بدین صورت است که شما چند تا تگ div رو میندازین روی هم (اندازه همه تگا باید یکی باشه تا کامل بیفتن روی هم) .
این کار با کد های css قابل انجام است

بعد بالای این تگ ها ، چند تا تگ a قرا میدین و با جاوا اسکریپت کاری می کنین که با کلیک روی هر کدوم از تگای a یک از تگای div نمایان بشه.


یدونه نمونه پروژه براتون آماده کردم که امیدوارم به کارتون بیاد.

نمونه کد :

کد: 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Tab Menu</title>
<style type="text/css">
*{
    border:opx;margin:0px;padding:0px;font-family:Tahoma;font-size:small;
}
.Menu{
    width:402px;height:42px;direction:rtl;
}

.Menu td{
    text-align:center;cursor:pointer;
}

.Tab{
    width:390px;height:400px;position:absolute;top:39px;left:0px;direction:rtl;text-align:right;background-color:silver;padding:20px 5px 0px 5px;
}

#Tab1{
    display:block;
}

#Tab2{
    display:none;
}

#Tab3{
    display:none;
}

.ActiveMenu{
    background-color:silver;border-bottom:0px;
}
.DeactiveMenu{
    background-color:white;border:1px gray solid;
}
</style>

<script type="text/javascript" language="javascript">

function ChangeTab(TabId)
{
    if (TabId == 1)
    {
        document.getElementById("Menu1").className = 'ActiveMenu';
        document.getElementById("Menu2").className = 'DeactiveMenu';
        document.getElementById("Menu3").className = 'DeactiveMenu';
        
        document.getElementById("Tab1").style.display = 'block';
        document.getElementById("Tab2").style.display = 'none';
        document.getElementById("Tab3").style.display = 'none';
        
    }
    else if (TabId == 2)
    {
        document.getElementById("Menu1").className = 'DeactiveMenu';
        document.getElementById("Menu2").className = 'ActiveMenu';
        document.getElementById("Menu3").className = 'DeactiveMenu';
        
        document.getElementById("Tab1").style.display = 'none';
        document.getElementById("Tab2").style.display = 'block';
        document.getElementById("Tab3").style.display = 'none';

    }
    else if (TabId == 3)
    {
        document.getElementById("Menu1").className = 'DeactiveMenu';
        document.getElementById("Menu2").className = 'DeactiveMenu';
        document.getElementById("Menu3").className = 'ActiveMenu';
        
        document.getElementById("Tab1").style.display = 'none';
        document.getElementById("Tab2").style.display = 'none';
        document.getElementById("Tab3").style.display = 'block';

    }
}


</script>

</head>

<body>

<table class="Menu">
    <tr>
        <td id="Menu1" class="ActiveMenu" onclick="ChangeTab(1)">
            تاریخچه شرکت
        </td>
        
        <td id="Menu2" class="DeactiveMenu" onclick="ChangeTab(2)">
            خدمات شرکت
        </td>
        
        <td id="Menu3" class="DeactiveMenu" onclick="ChangeTab(3)">
            مقالات شرکت
        </td>

    </tr>
</table>

<div id="Tab1" class="Tab">
این شرکت در سال فلان شروع به کار کرد و ....
</div>

<div id="Tab2" class="Tab">
خدمات شرکت بصورت زیر می باشد : ....
</div>

<div id="Tab3" class="Tab" style="right: 1123px">
جهت مشاهده مقالات آموزشی ما ، به سایت زیر مراجعه نمایید : <br/>
<a href="http://NetNic.ir" title="کتب و جزوات آموزشی دانشجویی">سایت نت نیک</a>
</div>

</body>

</html>
 
F

fatemegoli

عضو جدید
سلام..
واقعا ممنونم از راهنماییتون..
خیییلی بدردم خورد..
واقعا تشکر..
موفق باشید دوست عزیز...
 
heil

heil

عضو جدید
خواهش می کنم ،

برای اینکه کدنویسیتون قوی بشه و روش های دیگر رو هم یاد بگیرین ؛ پیشنهاد می کنم ابن مقالات رو بخونین :

ساخت منوی کرکره ای با css (بدون نیاز به جاوا اسکریپت!)

آموزش ساخت منوی کرکره ای با جاوا اسکریپت

آموزش ساخت منوی کرکره ای با جی کوئری

آموزش ساخت منوی کرکرهای با افکت زیبای fade با کمک جی کوئری
 
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا