رفتن به مطلب

چگونگی ایجاد دوتب در دل همدیگر


پست های پیشنهاد شده

سلام بچه ها خسته نباشید ؛

من میخواستم دو تا تب در دل همدیگه ایجاد کنم مثلا به این صورت که 7 تیتر یک تب هست به اینصورت :

شنبه_یکشنه_دوشنبه_سه شنبه_چهارشنبه_پنج شنبه_جمعه

که وقتی بر روی تب شنبه کلیک میکنیم محتویات به اینصورت باز میشه :

تیتر یک

تیتر دو

تیتر سه

تیتر چهار

تیتر پنج

که بر روی هر یک از تیتر ها هم کلیک کنیم محتویات آن در همانجا نمایش داده بشه

اگر هم جا نبود یه نوار شماره پایین صفحه قرار داده بشه که تیتر های بعدی رو نشون بده

چطور میتونم همچین کاری بکنم؟؟؟

لینک به ارسال

آقا سعید و آقا صادق متاسفانه کمکی نکردن و اون چیزی که من مد نظرمه نبودن :mellow:

میدونم یکم که نه خیلی پیچیده و مشکله :unsure: البته چون مشکله اینجا مطرح کردم و الا اگه ساده بود که .... :)

تصویر اونچیزی که مد نظرمه و میزارم که دوستان راحت تر بتونند راهنمایی کنن

در اصل دو تب در دل همدیگه هست تصویر

ri5ex3ap1q8csxv05f2.jpg

لینک به ارسال

اصلا پیچیده نیست

شما برای محتویات هر تب یک لایه می سازی و بهشون id می دی مثلا از a1 تا a20 حالا این 20 آی دی کلید 5تاشون بالاست 10 تا راست 5 تا زیر مهم نیست کلید ها هر جا باشند فرقی نداره

بعد هر بیست لایه ات رو درون کادر اصلی پشت سر هم می چینی و به همشون یک کلاس می دی مثلا b

و به استایل اضافه می کنید


.b {display:none}

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

راه اول:

بعد با جاوا اسکریپت می نویسی


<script type="text/javascript">
function tabs(TAB)
{
document.getElementById('a1').style.display='none';
document.getElementById('a2').style.display='none';
....
document.getElementById(TAB).style.display='block'
}
</script>

بجای نقطه چین عین دو خط بالاش را تکرار می کنی تا a20

و در نهایت به هر کلیدت یک تکه کد اضافه می کنی


<a href="javascript:tabs('a1')">کلید a1</a>
<a href="javascript:tabs('a2')">کلید a2</a>

و همینطور ادامه می دید تا a20

راه دوم

CSS

به کدهای css اضافه کنید


.b:target {display:block}

و هر کلید را به آی دی مرتبطش لینک بدید مثلا


<a href="#a1">کلید1</a>

روش دوم خیلی راحته ولی انعطاف روش اول رو نداره

لینک به ارسال

اصلا پیچیده نیست

شما برای محتویات هر تب یک لایه می سازی و بهشون id می دی مثلا از a1 تا a20 حالا این 20 آی دی کلید 5تاشون بالاست 10 تا راست 5 تا زیر مهم نیست کلید ها هر جا باشند فرقی نداره

بعد هر بیست لایه ات رو درون کادر اصلی پشت سر هم می چینی و به همشون یک کلاس می دی مثلا b

و به استایل اضافه می کنید

استاد ممنون ولی یه مقدار ساده تر توضیح میدی ؟؟؟ در حد ابتدائی و اینا که متوجه بشم :D

لینک به ارسال

شما خوندی مطلب رو

من پله پله از اول تا به آخرش رو نوشتم

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

لینک به ارسال

آقا دمـــــــت گـــــــرم خیلی با مرامی اصن همین معرفت و مرام بعضی از دوستان مخصوصا شما منو شیفته ی وی پی پارسی کرده :D

داداش بازم ممنون

یه موردی اون تب قرمز رنگ تو تمام موارد ثابته که مد نظر من این نیست مثلن وقتی رو تب مورد چهار کلیک میشه بجای جمله ی "متن نمونه برای شماره 4" یه تب مشابه قرمز رنگ بیاد که بعد از کلیک روی تب مشابه موارد تو قسمت "متن نمونه برای شماره 4" نمایش داده بشه

لینک به ارسال

کد اصلی هیچ فرقی نمی کنه منتها بجای متن تب شماره چهر مجددا کدهای تب به شکلی که که دلتان می خواهد قرار می گیرند

لینک به ارسال

کد اصلی هیچ فرقی نمی کنه منتها بجای متن تب شماره چهر مجددا کدهای تب به شکلی که که دلتان می خواهد قرار می گیرند

اقا با اجازه شما یه تغییراتی به استایلش دادم http://jsbin.com/uyiken/1/

فقط اینکه جعبه پائین نتونستم بندازم تو تب دوم

میخوام مثل این تصویر بشه

لینک به ارسال

http://jsbin.com/eyedih/1/

با جی کوئری

خیلی ممنون آقا ایمان همونی شد که میخواستم ، میتونم اینو توی ورد پرس به صورت داینامیک استفاده کنم ؟؟؟

یعنی تب های 1 تا 7 بالا هر کدوم یه دسته ی مادر باشن و تب داخلی زیر دسته و باکس داخل تب که تصویر شاخص داره پست های اون دسته ، میشه یه همچین کاری یا اینکه باید همشو به صورت دستی و استاتیک تو ورد پرس استفاده کرد ؟؟؟

لینک به ارسال

می تئونید ولی کد نویسی سنگینی داره و باید برای هرکدوم یک کوئری بسازید

در بخش آموزش یک ژنراتور کوئری ساز پارسی رو معرفی کردم ازش استفاده کنید

لینک به ارسال

می تئونید ولی کد نویسی سنگینی داره و باید برای هرکدوم یک کوئری بسازید

در بخش آموزش یک ژنراتور کوئری ساز پارسی رو معرفی کردم ازش استفاده کنید

دیدم ژنراتورو ولی چجوری باهاش یه همچین چیزی ک میخوامو بسازم ؟؟؟ خیلی مبهم بود واسم شاید بخاطر اینکه تاحالا کار نکردم باهاش

لینک به ارسال

کار سختی می خواهید بکنید که یا باید در بخش خرید مطرح کنید ببینید کدوم از دوستان فرصتش رو داره یا باید کد نویسی را خوب بشناسید و بتوانید تحلیل هم به درستی انجام دهید مثلا در کد شما برای تبهای زیر مجموعه که قراره پست ها را نشان دهند نیازه دو بار کوئری اجرا بشه یکبار فقط عناوین چهار یا پنج پست آخر را لوپ کنه و یکبار هم خلاصه مطلب و تصویر شاخص

و باید آی دی حلقه دوم در آلت لینک اول قرار بگیره تا جی کوئری درست اجرا بشه

پیشنهاد می کنم خودتان دست نزنید در بخش خرید مطرح کنید احتمالا دوستان زیادی فرصتش را خواهند داشت

لینک به ارسال

ممنون آقا ایمان به صورت دستی بهش کد میدم چون یه تعداد خاصی مطلب نمایش میده زیاد تر نمیشه شاید به مرور زمان زیاد بشه که دستی وارد میکنم ، فقط یه نکته ای اگه تو تب دوم بخوام شماره صفحه بزارم که ادامه لینکهارو نشون بده به چه صورت باید قرار بدم ؟؟؟

لینک به ارسال

منظورتون رو خوب نگرفنتم ولی این کد php تبهای داخلی شما می شه


<div id="a4" class="tabsclass">
<ul id="Tabs4Button">
<?php
$custom_query = new WP_Query(array(
'post_status' =>'published',
'post_type' =>'post',
'posts_per_page' =>'3',
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
if ($custom_query->have_posts()) :?>
<ul>
<?php while($custom_query->have_posts()) : $custom_query->the_post();?>
<li class="icn_edit_article"><a alt="ba<?php the_ID();?>" href="#ba<?php the_ID();?>" ><?php the_title(); ?></a> </li>
<?php endwhile;?>
</ul>
<?php endif;?>
<?php wp_reset_query(); ?>

</ul>
<div class="newsub">
<?php
$custom_query = new WP_Query(array(
'post_status' =>'published',
'post_type' =>'post',
'posts_per_page' =>'3',
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
if ($custom_query->have_posts()) :?>
<?php while($custom_query->have_posts()) : $custom_query->the_post();?>
<div id="ba<?php the_ID();?>" class="subtabsclass">
<div id="tumnail">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
</div>
<div id="title-post"><a href="<?php the_permalink() ?>" rel="bookmark" ><?php the_title(); ?></a></div>
<?php the_excerpt();?>
</div>
<?php endwhile;?>
<?php endif;?>
<?php wp_reset_query(); ?>
</div>
</div>

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...