css متفاوت تب انتخابی به وسیله جاوا اسکریپت

[Pro.Graming]

سلام دوستان.
سوالی داشتم درباره اینکه:
چگونه رنگ تب انتخابی در یک منو را متفاوت از بقیه تب ها قرار بدیم؟
یه منو ایجاد کردم به وسیله تگ های ul , li و هر کدوم تبهای منو یک ادرس متفاوت دارند .
به این شکل:



<div class="navbar">
<ul>
<li><a class="home" href="">صفحه نخست</a>
</li>
<li><a class="" href="">صفحه دوم</a>
</li>
<li><a class="" href="">صفحه سوم</a>
</li>
<li><a class="" href="">صفحه جهارم</a>
</li>
<li><a class="" href="">تماس با ما</a>
</li>
</ul>
</div>


الان میخوام وقتی در صفحه نخست بودم رنگ تب صفحه نخست متفاوت باشه.
و یا صفحه دوم بودم رنگ تب صفحه دوم متفاوت باشه و. . . .

کد جاوااسکریپتی که این کار رو انجام بده و موقع انتخاب صفحه خاص سی اس اس خاصی رو روی تب انتخاب شده اعمال کنه میتونید بنویسید؟

ممنون

[alismith]

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


موفق باشید

[Pro.Graming]

سلام
ممنون از پاسخ
صفحات مقصد هم یک صفحه از صفحه های موجود در سایت هست.
مثلا صفحه نخست در حالت پیشفرض انتخاب شده وقتی وارد ادرس اصلی سایت میشیم.
و وقتی روی تب دوم که یه ادرس و صفحه دیگه از سایت هستن کلیک میکنیم وارد اون صفحه سایت شده و اون تب مربوطه رنگش تغییر میکنه.
کد جاوایی هست ولی بلد نیستم جاوا رو استفاده کنم:

<Script>
function tabcontroler(element) {
//get all list items:
var liArray = document.getElementById("list").getElementsByTagName("li");

//make all items inactive
for (var i = 0; i < liArray.length; i++)
liArray[i].className = "inactive";

//make clicked item active:
element.className = "active";
}
</script>

و تنها یک قالب در اختیار هست و اون قالب اصلی هست. مثل وبلاگ.

[alismith]

سلام
من یه چیز رو متوجه نشدم :



صفحات مقصد هم یک صفحه از صفحه های موجود در سایت هست.
----------------
وقتی روی تب دوم که یه ادرس و صفحه دیگه از سایت هستن کلیک میکنیم وارد اون صفحه سایت شده و اون تب مربوطه رنگش تغییر میکنه.

یا


تنها یک قالب در اختیار هست و اون قالب اصلی هست. مثل وبلاگ.


به هر حال در اینجا اگه شما چندتا صفحه دارید من فکر نکنم نیاز به javascript باشه و فقط کافیه برید تو صفحات مقصد و به صورت دستی به li مربوط به اون صفحه style بدید

مثلا:


/*
__Index__
index.html [page]
*/

<li class="active">HOME</li>
<li class="inactive">product</li>

/*_________________________*/


/*
__Product__
product.html [page]
*/

<li class="inactive">HOME</li>
<li class="active">product</li>

/*_________________________*/




موفق باشید

[Pro.Graming]

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

[alismith]

سلام
پس اینطور که گفتید با هر بار کلیک روی ایتم های منو صفحه دوباره لود میشه و محتویات مربوط به اون ایتم در صفحه دیگه ای نمایش داده میشه، خوب شاید یه روش این باشه که مثلا آدرس بار مرورگر رو در زمان لود صفحه بخونید و اون رو چک کنید
مثلا:

var url = window.location;

switch(url){

case 'http://index.php':

document.getElementById('homeLI').className="active";

break;

case 'http://product.php':

document.getElementById('productLI').className="active";

break;
}


این یه مثال کاملا ساده هستش که میاد آدرس بار رو چک می کنه ، البته در اینجا من به هر li شناسه یا id مخصوص دادم

موفق باشید

[Pro.Graming]

خیلی ممنون از جوابتون دوست عزیزم.

کدی هم هست به این شکل قرار میدم (البته فقط اسکریپت رو قرار میدم و بقیه کارا برای هماهنگ کردن اسکریپت با اچ تی ام ال به عهده ی کاربر)

<script language="javascript">
function extractPageName(hrefString)
{
var arr = hrefString.split('/');
return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}

function setActiveMenu(arr, crtPage)
{
for (var i=0; i<arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != "DIV")
{
arr[i].className = "active_tab";
arr[i].parentNode.className = "active_tab";
}
}
}
}

function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;

if (document.getElementById("navbar")!=null)
setActiveMenu(document.getElementById("navbar").getElementsByTagName("a"), extractPageName(hrefString));
}
</script>

به کلاس بندی و ای دی بندی تگ ها دقت بشه باید تا کد درست عمل کنه.
و کد اچ تی ام ال منو:

<div id="navbar" class="menu">
<ul>
<li>
<a id="list" href="link.html">صفحه نخست</a>
</li>
<li>
<a href="link1.html">صفحه دوم</a>
</li>
<li>
<a href="link2.html">صفحه سوم</a>
</li>
<li>
<a href="link3.html">تماس با ما</a>
</li>
<li>
<a href="link4.html">درباره ما</a>
</li>
</ul>
<script language="javascript">setPage()</script>
</div>
منبع: http://www.richnetapps.com/automatically_highlight_current_page_in/