ساخت منو با خصوصیات زیر

[deivid]

باسلام

یک منو با خصوصیات زیر را چگونه می توان ساخت:
با jquery ساخته شود.
فرض کنید که دو منو داریم با نامهای اخبار و مقاله. هرکدام دو تا تصویر مخصوص به خود دارند. یک تصویر برای زمانیست که هنوز روش کلیک نشده و دیگری زمانی که منوی مورد نظر روش کلیک می شود نمایش داده می شود.
در زمانی که روی یکی از منوها کلیک می کنیم به عنوان مثال اخبار، تصویر کلیک شده جایگزین تصویر کلیک نشده می شود و منوی مقاله که قبلا تصویر کلیک شده داشت حال تصویرش تغییر می کند و کلیک نشده می شود.
البته بنده برای 5 منو نیاز دارم. و هر بار که یک منو روش کلیک می شود و تصویر کلیک شده مورد نظر نمایش داده می شود 4 تای دیگر تصاویری که برای کلیک نشده یا همان غیر فعال است می خواهم نمایش داده شود.

[jalil_gh]

فرض می کنیم منوی شما به این صورته

<ul id='nav'>
<li id='one'>one</li>
<li id='two'>two</li>
<li id='three'>three</li>
<li id='four'>four</li>
<li id='five'>five</li>
</ul>


حالا تو فایل css تعیین کنید که هر کدوم از این آیتم ها موقعی که غیر فعالن چه عکسی باید داشته باشند

#one {
background-image: 'oneNotActive.png';
}

#two {
background-image: 'twoNotActive.png';
}

#three {
background-image: 'threeNotActive.png';
}

#four {
background-image: 'fourNotActive.png';
}

#five {
background-image: 'fiveNotActive.png';
}


حالا مشخص کنید که هر کدوم از این آیتم ها موقعی که فعالن چه تصویری باد داسته باشن (با استفاده از کلاس active)

#one.active {
background-image: 'oneActive.png';
}

#two.active {
background-image: 'twoActive.png';
}

#three.active {
background-image: 'threeActive.png';
}

#four.active {
background-image: 'fourActive.png';
}

#five.active {
background-image: 'fiveActive.png';
}


حالا فقط کافیه با jQuery کلاس active رو به آیتم مورد نظر اضافه کنید یا از اون حذف کنید.


$('#nav li').click(function(){
$('#nav li').removeClass('active');
$(this).addClass('active');
});


البته بهتره برای این کار از delegate استفاده کنید



$(document).delegate('#nav li', 'click', function(){
$('#nav li').removeClass('active');
$(this).addClass('active');
});

[peyman13618]

من روش شما رو برای سایتم استفاده کردم ولی جوابی نگرفتم. می خواستم وقتی روی یکی از منو ها کلیک می کنم و به صفحه ی مربوطه میره مشخص بشه الان تو کدوم صفحه هستم و رنگ اون منو عوض بشه. اینجور که مشخصه وقتی به صفحه ی جدید میره موقعیتش رو گم می کنه و باز همه چیز به حالت اول در می آد. توی یک سایت نوشته بود باید url صفحه رو بگیریم و بعد با اسکریپت منوی مربوطه رو اکتیو کنیم ولی اون کد ها هم جواب نداد نمی دونم اشکال سینتکس داشت یا کلا غلط بود؟ میشه یک کد ساده برای یک همچین منویی بنویسید

<script type="text/javascript">
jQuery(document).ready(function ($) {
// Get current url
// Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
var url = window.location;
$('#navMenu Ul Li a[href="' + url + '"]').addClass('current_page_item');
});
</script>

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

<script type="text/javascript">
$(document).ready(function () {
// Get current url
// Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
var url = window.location;
$('a[href="' + url + '"]').addClass('active');
$('a[href="' + url + '"]').prepend('// ');
});
</script>
لحظه ای که موس فشرده میشه تغییر رنگ رو نشون میده ولی وقتی ریلیز میشه دوباره عادی می شه

[jalil_gh]

اگه با کلیک روی هر لینک به صفحه جداگانه ای میرید باید دو نکته رو توجه داشته باشید.
اول اینکه اون کدی که url صفحه رو میگیره و ...، باید به همه صفحاتتون اضافه کنید. (اون کدی که پایین نوشتم)
دوم اینکه کلاس active رو هم برای همه صفحاتتون جداگانه تعریف کنید.

برای کد jquery هم اینو امتحان کنید.

$(function(){
var url = window.location.href;

$('#nav a').each(function(){
if (url.indexOf($(this).attr('href')) > -1){
$(this).addClass('active');
}
});
});

[peyman13618]

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