خارق العاده است!! 
کارهایی که میشه با توابع 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 بصورت یکجا
ولی من هنوز تو این زمینه راه نیفتادم و به مباحث مختلف همچون JS و CSS اشراف کامل ندارم، با این که دیروز یک کتاب توووووپ برای CSS و نیز jQuery خریدم و دارم یاد می گیرم، ولی هنوز تسلط کافی روی تمام مباحث ندارم. به هر حال خیلی ممنون میشم که تو این مدت کمکم کنید.
پاسخ با نقل قول
نوشته شده توسط mohkami
