حذف کلاس از یک تب و افزودن آن به تب دیگر ! [بایگانی]

xoogle.ir

یک شنبه 21 شهریور 1389, 01:46 صبح

سلام
راستش یه همچین تب ای ساختم میخاستم که هر وقت کاربر روی یکی از tab ها کلیک کرد. کلاس تب فعال (actived) حذف بشه (یا عوض بشه) و به تبی که روش کلیک شده کلاس actived اضافه بشه.
هرچی کار کردم فقط تونستم کلاس رو به تبی که روش کلیک شده اضافه کنم و نشد که همزمان کار حذف و اضافه کردن کلاس انجام بشه.

<ul class="tab">
<li><a href="login.php">ورود</a></li>
<li><a href="register.php">عضویت</a></li>
<li><a href="confirm.php">اکانت</a></li>
<li class="actived"><a href="get.php">دریافت</a></li>
</ul>

خیلی خیلی ممنون

hamiii

یک شنبه 21 شهریور 1389, 10:59 صبح

فکر کنم زیاد سختش کردین. برای هر لینک در صفحه چهار حالت : لینک،روی لینک(hover)،بازدید شده و فعال تعریف شده،که به هر کدوم میتونید جدا استایل بدین.
در مثال زیر همه ی لینکها به رنگ سیاه هستند. با رفتن موس بر روی اونها آبی میشن ، در حالتی که فعالند قرمزند و زمانی هم که مورد بازدید قرار گرفته باشند سبز می شوند.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style>
.tab li{
float:right;
margin:0 20px 0 20px;
}
.tab li a:link{
color:black;
}
.tab li a:visited{
color:green
}
.tab li a:active{
color:red;
}
.tab li a:hover{
color:blue
}
</style>
</head>

<body>
<center>
<ul class="tab">
<li><a href="#1">ورود</a></li>
<li><a href="#2">عضویت</a></li>
<li><a href="#3">اکانت</a></li>
<li><a href="#4">دریافت</a></li>
</ul>
</center>
</body>

</html>

xoogle.ir

یک شنبه 21 شهریور 1389, 11:25 صبح

خیلی ممنون
من اینا رو میدونم اما شما متوجه منظور من نشدی.
فکر کن من 4 تا تب برای 4 تا صفحه دارم و الان توی صفحه شماره 3 هستم. یه کلاس تعریف کردم برای تبهایی که الان فعال هستن (یعنی الان توی همون صفحه هستم) که مثلا بک گرانش با بقیه تب ها فرق میکنه.
حالا من میخام اگر روی تب شماره 2 کلیک کردم کلاس این تب بشه actived و کلاس actived از تب سومی گرفته بشه.

شبیه به ایت صفحه :

http://www.cloob.com/etc/main/terms/wrapper/true

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

aspismylove

یک شنبه 21 شهریور 1389, 13:36 عصر

سلام
راستش یه همچین تب ای ساختم میخاستم که هر وقت کاربر روی یکی از tab ها کلیک کرد. کلاس تب فعال (actived) حذف بشه (یا عوض بشه) و به تبی که روش کلیک شده کلاس actived اضافه بشه.
هرچی کار کردم فقط تونستم کلاس رو به تبی که روش کلیک شده اضافه کنم و نشد که همزمان کار حذف و اضافه کردن کلاس انجام بشه.

<ul class="tab">
<li><a href="login.php">ورود</a></li>
<li><a href="register.php">عضویت</a></li>
<li><a href="confirm.php">اکانت</a></li>
<li class="actived"><a href="get.php">دریافت</a></li>
</ul>

خیلی خیلی ممنون

سلام
من برای منوهام این کار رو کردم فک کنم برای تب ها هم همینه :خجالت:
این کد و من توی default نوشتم توی page_Load

dim a as htmlcontrols.htmlanchor
a=page.master.findcontrol("default")
a.attributes.add("class","active")
و بعد اومدم برای هر صفحه اون و توی page_load اون صفحه نوشتم
برا ی مثال توی صفحه contactus.aspx

dim a as htmlcontrols.htmlanchor
a=page.master.findcontrol("contactus")
a.attributes.add("class","active")

امیدوارم مفید باشه :قلب:

xoogle.ir

یک شنبه 21 شهریور 1389, 14:42 عصر

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

چون صفحاتم رو با ajax لود میکنم نمیتونم توی هر صفحه کلاس tab رو عوض میکنم به همین خاطر میخام با کلیک کردن عمل پاک کردن کلاس از تب قدیمی و اضافه کردن کلاس به تب جدید انجام بشه.

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

hamidre13

یک شنبه 21 شهریور 1389, 15:27 عصر

این کار شما فقط با جاوا اسکریپت امکان پذیر هست راستش الان باید برم کلاس ولی حتما تا شب براتون یک سمپل از این کار درست می کنم و می زارم!

xoogle.ir

یک شنبه 21 شهریور 1389, 18:25 عصر

این کار شما فقط با جاوا اسکریپت امکان پذیر هست راستش الان باید برم کلاس ولی حتما تا شب براتون یک سمپل از این کار درست می کنم و می زارم!

مرسی دوست عزیز
منتظرتم :قلب:

hamidre13

یک شنبه 21 شهریور 1389, 21:50 عصر

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

xoogle.ir

یک شنبه 21 شهریور 1389, 22:28 عصر

ممنونم دوستان با استفاده از jQuery تونستم به استایلی که میخام دست پیدا کنم!

$('.tab li a').click(function(){

$('.tab li').removeClass('selected');
$(this).parent().attr('class', 'selected');
return false;

});

hamidre13

یک شنبه 21 شهریور 1389, 22:36 عصر

ای کاش زودتر می گفتید که جی کوئری بلد هستید !:اشتباه:

xoogle.ir

دوشنبه 22 شهریور 1389, 00:58 صبح

وقتی این سوال رو پرسیدم بلد نبودم :چشمک:
همین امروز یاد گرفتم یعنی همین بعد از ظهری :لبخند: خیلی آسونه