ساخت منو با قابلیت مشخص بودن گزینه انتخاب شده

[malloc]

(مشکل هنوز به درستی رفع نشده)
یه سوال داشتم که خوب فکر میکنم برای شما عزیزان حرفه ای خیلی ساده باید باشه.
میخوام یه منو مثل عکس زیر داشته باشم .
http://barnamenevis.org/attachment.php?attachmentid=101178&d=1362855520

کدهای زیر رو هم زدم :
کد HTML:
<ul class="hmenu"> <li><a id="1" href="#" class="active">Main</a></li> <li><a id="2" href="#">Find A Car</a></li> <li><a id="3" href="#">Sell Your Car</a></li> <li><a id="4" href="#">Articles</a></li> <li><a id="5" href="#">Customers Say</a></li> <li><a id="6" href="Default2.aspx">Contact Us</a></li> </ul>
من یه کلاس تو css دارم به نام active که استایل رو به گزینه فعال میده . حالا من چه کدی و کجا بزنم که وقتی یه گزینه دیگه رو انتخاب کردم کلاس active برای اون گزینه فعال بشه .

اگه منظورمو متوجه نشدی بگید بیشتر توضیح بدم

[crazy_1892]

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

[malloc]

ممنون دوست عزیز.
خوب فکر میکنم توضیحاتم کافی بود . اما خوب سعی میکنم بیشتر توضیح بدم

ببین شما همین منوی بالای سایت برنامه نویسو نیگاه کن که وقتی توی تالار هستیم به شکل زیر هست :
101190
حالا وقتی میریم توی پرتال برنامه نویس به شکل زیر میشه :
101191

خوب حالا من یه فایل css دارم که توی اون فایل یه کلاس دارم به نام active که استایل منوی انتخابی رو طوری میکنه که مشخص بشه الان مثلا توی صفحه اصلی هستیم یا توی صفحه ارتباط با ما یا ....

من این کلاس active رو مثل کد زیر به اولین تگ a دادم. حالا میخوام ببینم چطور میتونم مثلا وقتی روی تگ a دیگری کلیک کرد اون کلاس active رو از تگ a اولی حذف کنم و به تگ جدیدی که روش کلیک شده اضافه کنم.
مثل کد زیر :


<ul class="hmenu"> <li><a id="1" href="#" class="active">Main</a></li> <li><a id="2" href="#">Find A Car</a></li> <li><a id="3" href="#">Sell Your Car</a></li> <li><a id="4" href="#">Articles</a></li> <li><a id="5" href="#">Customers Say</a></li> <li><a id="6" href="Default2.aspx">Contact Us</a></li> </ul>

اگه کدهای بالا ناخوانا بود و سخت بود کدها مثل زیر هست :
101192

[Mohammadvb6]

این سوال منم بود .

من برای این کار از jquery استفاده کردم . به این شکل :


$(selector).addClass(classname);

$(selector).removeClass(classname);


مثال :

<script src="jquery.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').mouseover(function(){
$('p').addClass('info');
})
$('button').mouseout(function(){
$('p').removeClass('info');
})
})
</script>


<style>
.info {
background:#000;
color:#FFF;
}
</style>

[malloc]

دوست عزیز ممنون بایت کدی که گذاشتی . حالا یه سوال دیگه
اینی که شما گذاشتی یه حالت استاتیک داره یعنی مثلا من یه منو دارم با 6تا آیتم.حالا من از کجا بفهمم کدوم در حال حاضر فعال هست که اونو remove class کنم و از کجا بفهمم رو چی کلیک کرده که اونو add class کنم.

[Mohammadvb6]

<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#1').click(function () {
$('a').removeClass('info');
$('#1').addClass('info');
})
$('#2').click(function () {
$('a').removeClass('info');
$('#2').addClass('info');
})
$('#3').click(function () {
$('a').removeClass('info');
$('#3').addClass('info');
})
$('#4').click(function () {
$('a').removeClass('info');
$('#4').addClass('info');
})
$('#5').click(function () {
$('a').removeClass('info');
$('#5').addClass('info');
})
$('#6').click(function () {
$('a').removeClass('info');
$('#6').addClass('info');
})
})
</script>


<style>
.info
{
background: #000;
color: #FFF;
}
</style>


<div>
<ul >
<li><a id="1" href="#" >Main</a></li>
<li><a id="2" href="#">Find A Car</a></li>
<li><a id="3" href="#">Sell Your Car</a></li>
<li><a id="4" href="#">Articles</a></li>
<li><a id="5" href="#">Customers Say</a></li>
<li><a id="6" href="#">Contact Us</a></li>
</ul>
</div>

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

[malloc]

اگر کسی روش بهینه تری بگه . لطفا http://barnamenevis.org/clear.gif (http://barnamenevis.org/newreply.php?do=newreply&p=1719621)

اتفاقا دوست عزیز من یبار تو یه پروژه ای دیدم که طرف حلقه گذاشته بود یا از آرایه استفاده میکرد که خوب من متوجه نشدم چیکار میکنه . الان نمونشو میزارم دوستان کمک کنن.
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $(">li", this), curr = $("li.active", this)[0] || $($li[0]).addClass("active")[0];

[Mohammadvb6]

از کدی که گذاشتید چیزی نفهمیدم !

ولی بهینه تر روش خودم میشه :


<script type="text/javascript">
$(document).ready(function () {
$('a').click(function () {
var id = $(this).attr('id');
$('a').removeClass('info');
$('#'+id).addClass('info');
})
})
</script>

[malloc]

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

[Salimjavahery]

ویرایش شد
سوال رو اشتباه متوجه شده بودم

[rezadana]

سلام دوست عزیز در لینک زیر یک نمونه واست گذاشتم. موفق باشی.
Example_www.rezalynda.rzb.ir.zip - 1 KB (http://uplod.ir/biqi9y7ozs2w/Example_www.rezalynda.rzb.ir.zip.htm)

ـــــــــــــــــــــــــ ــــــــــــــــ
www.rezalynda.rzb.ir