ساخت تب با قابلیت ژآکس [بایگانی]

ARIARAD

یک شنبه 11 خرداد 1393, 02:55 صبح

سلام وقت همگی دوستان بخیر

بنده یه مشکلی دارم

میخوام یه سری تب درست کنم به این شکل مثلا

<ul id="nav">
<li><a href="page_1.html">Page 1</a></li>
<li><a href="page_2.html">Page 2</a></li>
<li><a href="page_3.html">Page 3</a></li>
</ul>

<div id="ajax-content">This is default text, which will be replaced</div>

که وفقتی رو عنوان 1 کلیک شد مثلا
از توی function.php کدی که مربوط به اون عنوان هست رو توی قالبی که براش انتخاب کردیم ، لود کنه ؟

ممنون میشم راهنماییم کنید

مهرداد سیف زاده

یک شنبه 11 خرداد 1393, 08:36 صبح

در فایل function.php تابع زیر که tab مورد نظر رو میگیره و محتوای مرتبط با اون رو نشون میده

function tab_content($tab)
{
if($tab != null)

switch ($tab) {
case 'home':
{
echo '<h2>home Comtent</h2>';
}break;

case 'help':
{
echo '<h2>Help tab content</h2>';
}break;

case 'download':
{
echo '<h2>Download Comtent</h2>';
}break;
}
else
echo 'Please Select Tab !!!!';
}

$tab = isset($_GET['tab'])?$_GET['tab']:null;
tab_content($tab);

برای ajax هم از jauery و متد get استفاده کردم.

<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>

<ul id="nav">
<li ><a href="home">Page 1</a></li>
<li><a href="help">Page 2</a></li>
<li><a href="download">Page 3</a></li>
</ul>

<div id="ajax-content">This is default text, which will be replaced</div>

</body>

<script type="text/javascript">

$(document).ready(function(){
$('#nav a').click(function(){
var tab = $(this).attr('href');
$.get('function.php',{'tab':tab},function(data){
$('#ajax-content').html(data);
});
return false;
});
});

</script>

</html>

کدهارو اجرا گرفتم و مشکلی نداشت اگر نتونستید راه اندازی کنید پیام بدید تا کد رو به ایمیلتون بفرستم