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

سلام
خدمت دوستان چند وقتی بود خیلی ها میخواستن یک تعداد تب در صفحه اصلی داشته باشن مثل سایت فارس کیدذ ...
امروز یک مطلب دیدم گفتم شاید بکارشون بیاد ...
کد های زیر را قبل از تگ </head> قرار دهید .

<link rel="stylesheet" type="text/css" href="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/tabs.css" />
<script type="text/javascript" src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/amjqueryir.js"></script>
<link type="text/css" href="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/astylem.css" rel="stylesheet" />

و کد های زیر را درون جایی که میخواهید به نمایش در بیاد بگزارید ... مثلا : Index.php

<div id="container">

<ul class="tabs">
<li class="active" rel="tab1">تب اول</li>
<li rel="tab2"> تب دوم </li>
<li rel="tab3"> تب سوم</li>
<li rel="tab4"> تب چهارم</li>
</ul>

<div class="tab_container"> 

<div id="tab1" class="tab_content">
         <p><img src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/images/am.jpg"> <br />
         <strong>
         متن نمونه یک
         </strong></p></div><!-- /tab1 -->

<div id="tab2" class="tab_content">
       <p><a href="http://noisegraphic.com/" target="_blank"><img src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/images/ir.jpg"></a> <br />
      	<strong>
      	متن نمونه دو
      	</strong></p></div><!-- /tab2 -->

<div id="tab3" class="tab_content">
       <p><img src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/images/mans.jpg"> <br />
      	<strong>
      	متن نمونه سه
      	</strong></p></div><!-- /tab3 -->

<div id="tab4" class="tab_content">
       <p><img src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/images/ouri.jpg"> <br />
      	<strong> آماده سازی توسط امیر منصوری -
		Amir.Mansouri_Designer@Yahoo.Com </strong></p></div><!-- /tab4 --> 

</div>
</div>

حالا شما میتونید مطالبی که دوستارید را جای عکس ها قرار دهید ... مثلا : آخرین اخبار سایت یا آخرین اخبار موسیقی
-----------------------------------------------------------------------------
دمو آنلاین :
http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/
-----------------------------------------------------------------------------
منبع : امیر منصوری - نویز گرافیک
http://noisegraphic.com

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
nasour - Morteza - Araz - NESTED - Parsa - sheisebaboo - omidha

Soroushsmp

آفلاین
عضو
تعداد نوشته‌ها: ۵
# نوشته شده: ۱۲ سال پیش
۲۷ دی ۱۳۹۰ - ۱۵:۱۴

با سلام و تشکر
من برای مناسب سازی و استفاده این تب منو در سایتم به فایل های سورسش نیاز دارم، میشه لطفا فایل ها رو برای دانلود بزارید؟
امین

آفلاین
عضو
تعداد نوشته‌ها: ۶۳۹
تشکر شده: ۶۰۲ بار
# نوشته شده: ۱۲ سال پیش
۲۷ دی ۱۳۹۰ - ۱۶:۳۲
به کدوم فایل ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟
```
<link rel="stylesheet" type="text/css" href="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/tabs.css" />
<script type="text/javascript" src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/amjqueryir.js"></script>
<link type="text/css" href="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/astylem.css" rel="stylesheet" />
```
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
mohmon
Soroushsmp

آفلاین
عضو
تعداد نوشته‌ها: ۵
# نوشته شده: ۱۲ سال پیش
۲۷ دی ۱۳۹۰ - ۱۸:۵۸

فایل های سی اس اس و جاوایی که آپلود شده تو این آدرس:
http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/tabs.css
http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/amjqueryir.js
http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/astylem.css
--------------------------------------------
tab.css , amjqueryir.js , astylem
ممکنه این فایل ها رو برای دانلود بزاری؟ چون با این استایل ها من نمی تونم ازش تو سایتم استفاده کنم.
mohmon

آفلاین
عضو
تعداد نوشته‌ها: ۳۶۷
تشکر شده: ۱۶۰ بار
# نوشته شده: ۱۲ سال پیش
۲۷ دی ۱۳۹۰ - ۱۹:۵۴

خب دوست عزیز همون آدرس هایی که دادی رو باز کن بعدش محتویاتش رو با همون فرمتی که نوشته ذخیره کن بعدش در جای مورد نظر هاستت آپلودش کن و آدرس جایی که آپلود کردی رو در کد ها جایگزین کن

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
NESTED - امین
Soroushsmp

آفلاین
عضو
تعداد نوشته‌ها: ۵
# نوشته شده: ۱۲ سال پیش
۲۸ دی ۱۳۹۰ - ۲۰:۰۸

:D
دوست عزیز شما اگه قبل نظر ، یه نگاه کوچیک به اون لینکها مینداختی میدیدی که باز نمیشه.
اگه نویسنده ی این مطلب این لطف به من بکنه ممنون می شم.

سلام
جناب شما هم اگه دقت کنی میبینی که یدونش فقط باز نمیشه اونم تا فردا قرار میدم ؟؟
محتویات پرونده astylem.css را در یه پرونده با پسوند سی اس اس ذخیره کنید ...
محتویات پرونده astylem.css

ul.tabs {
		margin: 0;
		padding: 0;
		float: right;
		list-style: none;
		height: 32px;
		border-bottom: 1px solid #999999;
		border-right: 1px solid #999999;
		width: 100%;
		font:12px tahoma;
	}
	ul.tabs li {
		float: right;
		margin: 0;
		cursor: pointer;
		padding: 0px 21px ;
		height: 31px;
		line-height: 31px;
		border: 1px solid #999999;
		border-right: none;
		font-weight: bold;
		background: #EEEEEE;
		overflow: hidden;
		position: relative;
	}
	ul.tabs li:hover {
		background: #CCCCCC;
	}
	ul.tabs li.active{
		background: #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
	}
	.tab_container {
		border: 1px solid #999999;
		border-top: none;
		clear: both;
		float: right;
		width: 100%;
		background: #FFFFFF;
	}
	.tab_content {
		padding: 10px;
		font:11px tahoma;
		text-align:right;
		display: none;
	}

محتویات پرونده amjqueryir.js را در یه پرونده با پسوند js ذخیره کنید ...
محتویات پرونده amjqueryir.js
http://pastebin.com/GYP3FFHC

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
NESTED - Morteza

arshiya123

آفلاین
عضو
تعداد نوشته‌ها: ۱۳
# نوشته شده: ۱۲ سال پیش
۷ بهمن ۱۳۹۰ - ۱۲:۰۷

سلام
ببخشید من از موقعی که این تب رو استفاده کردم اسلایدشو از کار افتاده و این هم میدونم که مشکل از js این تب هست حالا باید چیکار کنم؟!
باتشکر از پاسخگویی شما
امین

آفلاین
عضو
تعداد نوشته‌ها: ۶۳۹
تشکر شده: ۶۰۲ بار
# نوشته شده: ۱۲ سال پیش
۷ بهمن ۱۳۹۰ - ۱۲:۰۹

arshiya123 گفت:
سلام
ببخشید من از موقعی که این تب رو استفاده کردم اسلایدشو از کار افتاده و این هم میدونم که مشکل از js این تب هست حالا باید چیکار کنم؟!
باتشکر از پاسخگویی شما

دوست عزیز توی سایت زیر برین و درخواست بدین تا براتون درست کنه ...
http://noisegraphic.com/%D8%AA%D8%A8-%D9%85%D9%86%D9%88-%D8%B3%DB%8C-%D8%A7%D8%B3-%D8%A7%D8%B3-%D9%88-%D8%AC%DB%8C-%DA%A9%D9%88%D8%A6%D8%B1%DB%8C-%D8%B3%D8%A7%D8%AF%D9%87/

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
arshiya123
arshiya123

آفلاین
عضو
تعداد نوشته‌ها: ۱۳
# نوشته شده: ۱۲ سال پیش
۷ بهمن ۱۳۹۰ - ۱۳:۴۴

یعنی بجز اونها

beatkids گفت:

دوست عزیز توی سایت زیر برین و درخواست بدین تا براتون درست کنه ...
http://noisegraphic.com/%D8%AA%D8%A8-%D9%85%D9%86%D9%88-%D8%B3%DB%8C-%D8%A7%D8%B3-%D8%A7%D8%B3-%D9%88-%D8%AC%DB%8C-%DA%A9%D9%88%D8%A6%D8%B1%DB%8C-%D8%B3%D8%A7%D8%AF%D9%87/

یعنی به جز اونها کسی نمیتونه به من کمک کنه ؟!
Parsa

آفلاین
عضو فعال
تعداد نوشته‌ها: ۱۹۲۱
تشکر شده: ۲۶۸۳ بار
# نوشته شده: ۱۲ سال پیش
۷ بهمن ۱۳۹۰ - ۱۴:۰۶
با توجه به اینکه از jquery استفاده میکنه. میتوانید به غیر از کد زیر باقی را از فایل js حذف کنید و تست!
```
$(document).ready(function() {

	$(".tab_content").hide();
	$(".tab_content:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel");
		$("#"+activeTab).fadeIn();
	});
});
```
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
arshiya123 - Morteza
امین

آفلاین
عضو
تعداد نوشته‌ها: ۶۳۹
تشکر شده: ۶۰۲ بار
# نوشته شده: ۱۲ سال پیش
۷ بهمن ۱۳۹۰ - ۱۴:۲۷

چون منبعش اونجاست من گفتم ...

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
arshiya123
arshiya123

آفلاین
عضو
تعداد نوشته‌ها: ۱۳
# نوشته شده: ۱۲ سال پیش
۷ بهمن ۱۳۹۰ - ۱۴:۲۸
parselearn گفت:
با توجه به اینکه از jquery استفاده میکنه. میتوانید به غیر از کد زیر باقی را از فایل js حذف کنید و تست!
```
$(document).ready(function() {

	$(".tab_content").hide();
	$(".tab_content:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel");
		$("#"+activeTab).fadeIn();
	});
});
```
امتحان میکنم ممنون
arshiya123

آفلاین
عضو
تعداد نوشته‌ها: ۱۳
# نوشته شده: ۱۲ سال پیش
۷ بهمن ۱۳۹۰ - ۱۴:۴۰
parselearn گفت:
با توجه به اینکه از jquery استفاده میکنه. میتوانید به غیر از کد زیر باقی را از فایل js حذف کنید و تست!
```
$(document).ready(function() {

	$(".tab_content").hide();
	$(".tab_content:first").show(); 

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel");
		$("#"+activeTab).fadeIn();
	});
});
```
جاوا اسکریپت از کار افتاد و حتما هر چیزی هست زیر سر همون خط اول هست
arshiya123

آفلاین
عضو
تعداد نوشته‌ها: ۱۳
# نوشته شده: ۱۲ سال پیش
۷ بهمن ۱۳۹۰ - ۱۸:۲۵

کسی نیست به ما کمک کنه :)
امین

آفلاین
عضو
تعداد نوشته‌ها: ۶۳۹
تشکر شده: ۶۰۲ بار
# نوشته شده: ۱۲ سال پیش
۷ بهمن ۱۳۹۰ - ۱۸:۳۷

صد بار گفتم بازم میگم ...
توی منبعش پیگیری کنید ...

اومدین ثواب کنیم ، کباب شدیم ...

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
NESTED - علی سجاد

وردپرس فارسی

انجمن

تب منو سی اس اس و جی کوئری ساده برای سایت ها و وبلاگ ها (۱۶ نوشته)

درباره‌ی این موضوع

برچسب‌ها