4 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

با سلام خدمت همه دوستان

من یک باکس css ویرایش کردم که دارای فایل js هست و بدون مشکل کار میکنه. ولی وفتی میخوام برای یک جای دیگه از همین تب باکس استفاده کنم به مشکل بر میخوریم.

برای اینکه متوجه منطورم بشید :

یک فایل html داریم که کدش به صورت زیر هست :


<ul class="tabContainer">
<!-- The jQuery generated tabs go here -->
</ul>
<div class="clear"></div>
<div id="tabContent">
<div id="contentHolder">
<!-- The AJAX fetched content goes here -->
</div>
</div>

حالا با style.css کاری نداریم.

و یک فایل js داره به صورت زیر :


$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

/* Defining an array with the tab text and AJAX pages: */
var Tabs = {
'Tab one' : 'pages/page1.html',
'Tab two' : 'pages/page2.html',
'Tab three' : 'pages/page3.html',
'Tab four' : 'pages/page4.html'
}

/* The available colors for the tabs: */
var colors = ['blue','green','red','orange'];

/* The colors of the line above the tab when it is active: */
var topLineColor = {
blue:'lightblue',
green:'lightgreen',
red:'red',
orange:'orange'
}

/* Looping through the Tabs object: */
var z=0;
$.each(Tabs,function(i,j){
/* Sequentially creating the tabs and assigning a color from the array: */
var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');

/* Setting the page data for each hyperlink: */
tmp.find('a').data('page',j);

/* Adding the tab to the UL container: */
$('ul.tabContainer').append(tmp);
})
/* Caching the tabs into a variable for better performance: */
var the_tabs = $('.tab');

the_tabs.click(function(e){
/* "this" points to the clicked tab hyperlink: */
var element = $(this);

/* If it is currently active, return false and exit: */
if(element.find('#overLine').length) return false;

/* Detecting the color of the tab (it was added to the class attribute in the loop above): */
var bg = element.attr('class').replace('tab ','');
/* Removing the line: */
$('#overLine').remove();

/* Creating a new line with jQuery 1.4 by passing a second parameter: */
$('<div>',{
id:'overLine',
css:{
display:'none',
width:element.outerWidth()-2,
background:topLineColor[bg] || 'white'
}}).appendTo(element).fadeIn('slow');

/* Checking whether the AJAX fetched page has been cached: */

if(!element.data('cache'))
{
/* If no cache is present, show the gif preloader and run an AJAX request: */
$('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');
$.get(element.data('page'),function(msg){
$('#contentHolder').html(msg);

/* After page was received, add it to the cache for the current hyperlink: */
element.data('cache',msg);
});
}
else $('#contentHolder').html(element.data('cache'));

e.preventDefault();
})

/* Emulating a click on the first tab so that the content area is not empty: */
the_tabs.eq(0).click();
});

اگر دقت کنید داخل فایل js فایل های html هم هست که با زدن tab 1 یا tabs 2 محتوای داخل فایل page1.html و... نشون میده.

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

چطوری میتونم داخل فایل js این کد های دیگه تعریف کنم تا بتون به یک Div جدید از این استفاده کنم؟

امیدوارم منظورم رو رسونده باشم.

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

سپاس

ویرایش شده در توسط webmaster
0

به اشتراک گذاری این پست


لینک به پست

این کد کامل نیست کد فایل js مربوط به تب ها هم شرطه ولی معمولا می شه


var Tabs = {
'Tab one' : 'pages/page1.html',
'Tab two' : 'pages/page2.html',
'Tab three' : 'pages/page3.html',
'Tab four' : 'pages/page4.html',
'Tab five' : 'pages/page5.html',
'Tab six' : 'pages/page6.html'
}

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


var Tabs1 = {
'Tab one' : 'pages/page1.html',
'Tab two' : 'pages/page2.html',
'Tab three' : 'pages/page3.html',
'Tab four' : 'pages/page4.html'
}
var Tabs2 = {
'Tab one' : 'pages/page5.html',
'Tab two' : 'pages/page6.html',
'Tab three' : 'pages/page7.html',
'Tab four' : 'pages/page8.html'
}

2

به اشتراک گذاری این پست


لینک به پست

ممنون استاد عزیز

کد ها رو همینطوری که در قسمت دوم گفتید قرار دادم ولی زمانی که روی تب هاش کلیک میکنم به صورت کاملا خود جوش شروع میکنه تا ته صفحه باکس میسازه :D

فایل دمو رو پیوست کردم اگر لطف کنید ببینید ممنون میشم.

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

demo23.zip

0

به اشتراک گذاری این پست


لینک به پست

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط prooshe
      سلام خسته نباشید.
      من بدون فعالسازی ssl و نصب افزونه از قسمت تنظیمات وردپرسم آدرس سایتم را از http به https تغییر دادم الان دیگه نه سایتم بالا میاد نه دسترسی به مدیریتم دارم تا دوباره ویرایش کنم لطفا راهنمایی کنید؟
    • توسط samadionline
      سلام خدمت شما عزیزان
      چطوری میشه در وردپرس مثل جوملا برای کاربران گروه و سطوح دسترسی تعریف کرد؟
      و همچنین اینکه در جوملا در تنظیمات میشد صفحه آفلاین تعریف کرد و کاربران با لاگین کردن وارد صفحه اصلی سایت میشدند در وردپرس چطور میشه این کار رو انجام داد؟
      تشکر می کنم اگر کسی سر در میاره یه توضیح مختصر بده
    • توسط ashkan91
      با سلام و خسته نباشید
      دوستان کسی میدونه چطور میشه فیلد ایمیل رو از تو فرم تسویه حساب ووکامرس غیرضروری کرد؟ (بدون استفاده از افزونه) یکی از دوستان این لینک رو فرستادن اما نمیدونم کدام تکه کد از این صفحه را میبایست درون کدهای سایت قرار بدم که مشکل حل بشه؟
      https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/#example-make-phone-number-not-required
    • توسط aiinaz
      سلام دوستان 
       برای فونت من از @font face استفاده کردم تا فونتی که لازم دارم اعمال بشه اما نمی دونم چرا هر دفعه که صفحه رفرش میشه برای چند ثانیه فونت تغییر میکنه؟!!!! از نظر ادرس دهی هم درست انجام دادم و بعضی از فونت ها کلا اعمال نمیشه با اینکه روی سیستمم دارم؟!!!
    • توسط seosec
      سلام دوستان وقت بخیر ما یک سایت داریم قبلا توسط یک نفر طراحی شده و دگ پشتیبانی نمیشه.میخاییم خودمان پشتیبانی را انجام بدیم قصد داریم افزونه ووکامرس از ساست ژاکت بخریم فقط نمیدوینم با قالب ما سازگار هست یا نه؟اسم قالب سایت هم نمیدونیم!! سایت ما در زمینه اموزش امنیت اطلاعات میباشد!کسی میتونه راهنمایی کنه؟؟ ادرس سایت seosec.ir