ساخت تب با استفاده از jQuery و css بدون افزونه

[Blood 23]

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

لطفا راهنمایی بفرمایید

یک تب ساده میخوام با استفاده از jQuery راهنمایی بفرمایید؟

[Farzad 3805]

http://www.htmldrive.net/items/show/1023/Very-Simple-jQuery-Tabs

http://jsfiddle.net/iamacatperson/R85tE/

http://www.htmldrive.net/items/demo/1023/Very-Simple-jQuery-Tabs

http://os.alfajango.com/easytabs/

[Blood 23]

ممنون یه مشکلی دارم من از تب ها میخوام استفاده کنم و تمام کد های tab رو قرار دادم تو صفخاتم اما کار نمیکنه ؟در صفحات من فکرمیکنم از j qoury باشه ؟ اما نمی دونم چرا اینجوریه ؟

ویرایش شده خرداد 93 توسط M.At

[عبدالماجد 3203]

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

<script src="folder/file.js">

کدها رو به این صورت تغییر بدید :

<script src="<?php bloginfo('template_url'); ?>/folder/file.js">

موفق باشید.

[Blood 23]

دمت گرم داداش خیلی لطف کردی

[Blood 23]

میخوام این فاصله رو 0 کنم کجای این کد هست ؟

.r-tabs {
position: relative;
}
.r-tabs .r-tabs-nav {
border-bottom: 1px solid #F3F3F3;
}
.r-tabs .r-tabs-nav .r-tabs-tab {
position: relative;
top: 1px;
}
.r-tabs .r-tabs-nav .r-tabs-anchor {
background: #00aadd;
margin-bottom: 3px;
padding: 10px 12px;
display: inline-block;
text-decoration: none;
color: #fff;
font-weight: bold;
width:350px;
}
.r-tabs .r-tabs-nav .r-tabs-state-active {
background-color: #fff;
margin-bottom: -1px;
border-top: 1px solid #F3F3F3;
border-right: 1px solid #F3F3F3;
border-left: 1px solid #F3F3F3;
}
.r-tabs .r-tabs-nav .r-tabs-state-disabled {
opacity: 0.5;
}
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
color: #00aadd;
background-color: #fff;
}
.r-tabs .r-tabs-panel {
border-right: 1px solid #F3F3F3;
border-bottom: 1px solid #F3F3F3;
border-left: 1px solid #F3F3F3;
margin-bottom: 3px;
}
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
display: block;
padding: 10px;
background-color: #00aadd;
color: #fff;
font-weight: bold;
text-decoration: none;
margin-bottom: 3px;
}
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
opacity: 0.5;
}
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
background-color: #fff;
color: #00aadd;
border-top: 1px solid #F3F3F3;
border-right: 1px solid #F3F3F3;
border-left: 1px solid #F3F3F3;
margin-bottom: 0;
}
.r-tabs .r-tabs-nav {
    margin: 0;
    padding: 0;
}
.r-tabs .r-tabs-tab {
    display: inline-block;
    margin: 0;
    list-style: none;
}
.r-tabs .r-tabs-panel {
    padding: 15px;
    display: none;
}
.r-tabs .r-tabs-accordion-title {
    display: none;
}
.r-tabs .r-tabs-panel.r-tabs-state-active {
    display: block;
}

[Alireza Xn 1644]

میخوام این فاصله رو 0 کنم کجای این کد هست ؟

اینطوری که نمیشه فهمید ! یه ادرس انلاین قرار بدید تا برسی بشه یا اینکه سورس html رو هم قرار بدید .

ویرایش شده خرداد 93 توسط RapiD AM

[عبدالماجد 3203]

دمو بدید.

احتمالا مارجین یا بردر هست.

[Blood 23]

دمو

لطفا دانلود کنید

آنلاین نمی تونم بدم چون روی لوکال هست من از این تب استفاده میکنم اما این فاصله از بین نمی ره

[Blood 23]

اینطوری که نمیشه فهمید ! یه ادرس انلاین قرار بدید تا برسی بشه یا اینکه سورس html رو هم قرار بدید .

این سورس html

<script type="text/javascript">
	    $(document).ready(function () {
		    $('#horizontalTab').responsiveTabs({
			    rotate: false,
			    startCollapsed: 'accordion',
			    collapsible: 'accordion',
			    setHash: true,
			    disabled: [3,4]
		    });
		    $('#start-rotation').on('click', function() {
			    $('#horizontalTab').responsiveTabs('active');
		    });
		    $('#stop-rotation').on('click', function() {
			    $('#horizontalTab').responsiveTabs('stopRotation');
		    });
		    $('#start-rotation').on('click', function() {
			    $('#horizontalTab').responsiveTabs('active');
		    });
		    $('.select-tab').on('click', function() {
			    $('#horizontalTab').responsiveTabs('activate', $(this).val());
		    });
	    });
    </script>
    <div id="horizontalTab">
	    <ul>
		    <li><a href="#tab-1">اخبار سایت</a></li>
		    <li><a href="#tab-2">اطلاعیه آموزشگاه</a></li>
		    <li><a href="#tab-3">تقویم آموزشی</a></li>
	    </ul>
	    <div id="tab-1">
<?php
$custom_query = new WP_Query(array(
'post_status' =>'publish',
'post_type' =>'post',
'order' =>'descending',
'orderby' =>'ID',
'cat' =>'3',
'posts_per_page' =>'5',
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
?>
<ul>
<?php if($custom_query->have_posts()) :
while($custom_query->have_posts()) : $custom_query->the_post();?>

<?php if ( has_post_thumbnail() ) { the_post_thumbnail();} ?><li><strong><a class="links" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong>
	 <?php the_date('H:i - y/m/d') ;?>
<div class="post" id="post<?php echo the_ID();?>">
  <?php the_content(); ?>
</div>
</li>
<?php endwhile;endif;?>
</ul>
<?php wp_reset_query(); ?>
	    </div>
	    <div id="tab-2">
<?php
$custom_query = new WP_Query(array(
'post_status' =>'publish',
'post_type' =>'post',
'order' =>'descending',
'orderby' =>'ID',
'cat' =>'2',
'posts_per_page' =>'5',
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
?>
<ul>
<?php if($custom_query->have_posts()) :
while($custom_query->have_posts()) : $custom_query->the_post();?>

<?php if ( has_post_thumbnail() ) { the_post_thumbnail();} ?><li><strong><a class="links" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong>
	 <?php the_date('H:i - y/m/d') ;?>
<div class="post" id="post<?php echo the_ID();?>">
  <?php the_content(); ?>
</div>
</li>
<?php endwhile;endif;?>
</ul>
<?php wp_reset_query(); ?>
	    </div>
	    <div id="tab-3">
	    <?php
$custom_query = new WP_Query(array(
'post_status' =>'publish',
'post_type' =>'post',
'order' =>'descending',
'orderby' =>'ID',
'cat' =>'4',
'posts_per_page' =>'5',
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
?>
<ul>
<?php if($custom_query->have_posts()) :
while($custom_query->have_posts()) : $custom_query->the_post();?>

<?php if ( has_post_thumbnail() ) { the_post_thumbnail();} ?><li><strong><a class="links" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></strong>
	 <?php the_date('H:i - y/m/d') ;?>
<div class="post" id="post<?php echo the_ID();?>">
  <?php the_content(); ?>
</div>
</li>
<?php endwhile;endif;?>
</ul>
<?php wp_reset_query(); ?>
	    </div>

[اشکان 1989]

با سلام.

با توجه به راست چین یا چپ چین بودن به این کلاس :

.r-tabs .r-tabs-nav .r-tabs-tab

خاصیت float اضافه کنید.

[تهران سایت دیزاین 137]

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

لطفا کد زیر را به استایل خود بیفزایید :

horizontalTab ul li#[/left]

[left]}[/left]

[left]margin-right:-3px
{

ویرایش شده خرداد 93 توسط ایــــــــران وردپــــــرس

[تهران سایت دیزاین 137]

کد زیر را اضافه کنید :

#horizontalTab ul li { margin-right:-3px; }

ویرایش شده خرداد 93 توسط ایــــــــران وردپــــــرس

[Blood 23]

کد زیر را اضافه کنید :

#horizontalTab ul li { margin-right:-3px; }

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

ویرایش شده خرداد 93 توسط M.At

[تهران سایت دیزاین 137]

دوست عزیز من سلام , من مشکلی نداره که ! ایشون میتوننMargin-Right:-3px رو بدن ولی بعد از اون به تگ ul هم از سمت چپ فاصله بدن که از کادر نزنه بیرون !

[Blood 23]

میشه کدش رو اینجا قرار بدین؟

[تهران سایت دیزاین 137]

سلام دوست من , بفرمایید این کد را داخل استایل قرار دهید :

.r-tabs-nav li
{
margin:-3px !important;
margin-left:0px !important;
}

موفق باشد

[Blood 23]

مشاهده کنید

[تهران سایت دیزاین 137]

براتون آپلود کردن

http://www.uplooder.net/cgi-bin/dl.cgi?key=3d22ee7c8ab4129f55032305613017ce

اینکم عکس :

[Blood 23]

آقا این فایل دانلود نمیشه؟