1 ضمیمه
ساخت تمام Tab های یک Tab Navigation بصورت یکجا
نمیدونستم این سوال رو دقیقا تو کدوم بخش بپرسم، به هر حال معذرت میخوام...
من داشتم تمرین می کردم، و یک Tab Navigation با CSS برای خودم ساختم (مثل همونی که تو سایت wikipedia استفاده میشه). تنها کمبودش اینه که در حال واحد فقط برای یک تب فعال تعریف میشه و برای عوض شدن تب فعال باید کلا اون کد رو تغییر داد. حالا هم میشه این کار رو با فایل های متعدد انجام داد و هم میشه به چند روش مختلف و یکی از یکی بهتر با AJAX انجامش داد. بحث من اینا نیست، بحث اینه که من میخوام همه این تب ها و محتویات درونی شان رو یکجا بسازم و با کلیک روی هر تب، محتویات خاص اونو نمایش بدهم. دقیقا چیزی شبیه بخش دیدن پروفایل کاربران همین سایت (VBulletin) که قسمت های مختلف چون "درباره من" ، "آمار" ، "دوستان" و ... بصورت یکجا بارگذاری شده اند و سپس به آن شکل پشت سر هم مخفی شده اند.
شاید فکر کنید چقدر تنبلم و نمیرم چند تا تست انجام بدم تا حل بشه، یا فکر کنید چقدر خنگم که نمیتونم این کد رو خودم بنویسم... :گیج: ولی من هنوز تو این زمینه راه نیفتادم و به مباحث مختلف همچون JS و CSS اشراف کامل ندارم، با این که دیروز یک کتاب توووووپ برای CSS و نیز jQuery خریدم و دارم یاد می گیرم، ولی هنوز تسلط کافی روی تمام مباحث ندارم. به هر حال خیلی ممنون میشم که تو این مدت کمکم کنید.
متشکرم :قلب:
نقل قول: ساخت تمام Tab های یک Tab Navigation بصورت یکجا
نمیخوام off topic بدم ولی چند روزه که کسی حتی فایل ضمیمه رو هم دانلود نکرده!
کسی نظری نداره؟؟؟
نقل قول: ساخت تمام Tab های یک Tab Navigation بصورت یکجا
سلام مجدد خدمت Lord Aelx
آقا ببین من کدها رو اینجا میذارم چون توضیحش زیاده خودت یه نگاه بنداز اگه هرجاشو نفهمیدی بگو تا واست توضیح بدم.
این قسمت رو به stylet اضافه کن
.visi{
display:block;
}
.hidi{
display:none;
}
div رو یه تغییراتی دادم:
<div id="selected">
<ul id="tabnav">
<li class="selected" ><a href="#1">Recipes</a></li>
<li class="unselected"><a href="#2">Contact Us</a></li>
<li class="unselected"><a href="#3">Articles</a></li>
<li class="unselected"><a href="#4">Buy Online</a></li>
</ul>
<div class="visi" id="cont1">
<h1>Selected</h1>
<p>Some text1 here, ...</p>
</div>
<div class="hidi" id="cont2">
<h1>Selected2</h1>
<p>Some text2 here, ...</p>
</div>
</div>
حالا این اسکریپت رو توی body اضافه کن:
<script>
$('a').click(function() {
$(".selected").attr("class",'unselected');
var curChildIndex = $(this).parent().prevAll().length + 1;
$(".visi").attr("class","hidi");
$("#cont"+curChildIndex).attr("class","visi" );
$(this).parent().attr("class",'selected');
});
</script>
هرجاشو سوال داشتی بپرس
نقل قول: ساخت تمام Tab های یک Tab Navigation بصورت یکجا
خارق العاده است!! :تشویق: کارهایی که میشه با توابع JS انجام داد، واقعا حیرت انگیزه!!! :لبخندساده: من بیش از پیش عاشق اون شدم... :قلب:
فقط یه مشکل، من کل کدی رو که دادید، متوجه شدم. فقط مشکل اینه که اسکریپت کار نمیکنه!! :لبخند:
ببینید، این فایل HTML من:
کد HTML:
<!DOCTYPE html>
<html xml:lang="fa" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>TEST CODES...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="styles/css.css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<script>
$('a').click(function() {
$(".selected").attr("class",'unselected');
var curChildIndex = $(this).parent().prevAll().length + 1;
$(".visi").attr("class","hidi");
$("#cont"+curChildIndex).attr("class","visi");
$(this).parent().attr("class",'selected');
});
</script>
<div id="selected">
<ul id="tabnav">
<li class="selected"><a href="#1">Recipes</a></li>
<li class="unselected"><a href="#2">Contact Us</a></li>
<li class="unselected"><a href="#3">Articles</a></li>
<li class="unselected"><a href="#4">Buy Online</a></li>
</ul>
<div class="visi" id="cont1">
<h1>Selected</h1>
<p>Some text1 here, ...</p>
</div>
<div class="hidi" id="cont2">
<h1>Selected2</h1>
<p>Some text2 here, ...</p>
</div>
<div class="hidi" id="cont3">
<h1>Selected3</h1>
<p>Some text3 here, ...</p>
</div>
<div class="hidi" id="cont4">
<h1>Selected4</h1>
<p>Some text4 here, ...</p>
</div>
</div>
</div>
</body>
</html>
و این هم فایل style.css :
C#ont1, C#ont2, C#ont3, C#ont4 {
border-left: 1px solid C#0C0C0;
border-right: 1px solid C#0C0C0;
border-bottom: 1px solid C#0C0C0;
padding: 10px 5px 6px 5px;
}
ul#tabnav {
list-style-type: none;
margin: 0;
padding-left: 40px;
padding-bottom: 24px;
border-bottom: 1px solid C#0C0C0;
font: bold 11px verdana, arial, sans-serif;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: #808080;
color: #FFFFFF;
margin: 2px 2px 0 2px;
border: 1px solid C#0C0C0;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
padding: 4px;
}
ul#tabnav a:hover {
background-color: #999999;
color: #FFFFFF;
}
div#selected li.selected, div#unselected li.unselected {
border-bottom: 1px solid #fff;
color: #000000;
background-color: #FFFFFF;
}
div#selected li.selected a:link, div#selected li.selected a:visited, div#unselected li.unselected a:link, div#unselected li.unselected a:visited {
color: #000000;
background-color: #FFFFFF;
}
div.visi{
display:block;
}
div.hidi{
display:none;
}
تغییراتی که روی CSS ایجاد کردم، فقط برای نمایش صحیح بود. خوب، حالا وقتی سر برگ جدید رو انتخاب می کنیم، نه خودش و نه محتویاتش عوض نمیشه...
خواهش می کنم راهنمایی بفرمایید، متشکرم :قلب:
نقل قول: ساخت تمام Tab های یک Tab Navigation بصورت یکجا
یه نکته ای رو هم اضافه کنم، من با Firefox و Chrome و IE تست کردم، قضیه همونی بود که گفتم ولی وقتی با Opera تست کردم، علاوه بر اون مورد (یعنی کار نکردن اسکریپت) یه مشکل دیگه هم وجود داشت و اون اینکه نوشته Recipes در سر برگ، در ابتدا hidden بود و بعد از رفتن موس روی آن (hover) به صورت دائمی نمایان شد (یعنی حتی با کنار رفتن موس هم باقی ماند)!!! فکر کنم یه اشکال منطقی پیش اومده باشه...
ممنون :قلب:
1 ضمیمه
نقل قول: ساخت تمام Tab های یک Tab Navigation بصورت یکجا
سلام،
اول اینکه تگ script رو قبل از بسته شدن تگ body بذار.
بعد اینکه من دقیقاً محتویات توی استیل اون صفحه که گزاشتم رو کپی کردم توی css.css (فقط اون #cont1 و ... رو درست کردم)
فایل css و html درست شده رو ضمیمه میکنم.
نقل قول: ساخت تمام Tab های یک Tab Navigation بصورت یکجا
نقل قول:
نوشته شده توسط
mohkami
سلام،
اول اینکه تگ script رو قبل از بسته شدن تگ body بذار.
بعد اینکه من دقیقاً محتویات توی استیل اون صفحه که گزاشتم رو کپی کردم توی css.css (فقط اون C#ont1 و ... رو درست کردم)
فایل css و html درست شده رو ضمیمه میکنم.
متشکرم، البته C#ont1 رو VB اینطور نوشته، تو فایل اصلی درسته... :چشمک:
