Выделить активную ссылку

Question

Как можно выделить активную ссылку при нажатии, но оставить ссылку на домашнюю страницу выделенной, пока не будет нажата другая ссылка?

Я использую PHP, если это поможет.

Вот мой (x) HTML-код.

<div id="nav">
    <ul>
        <li><a href="http://localhost/link-1/" class="active">Link 1</a></li>
        <li><a href="http://localhost/link-2/">Link 2</a></li>
        <li><a href="http://localhost/link-3/">Link 3</a></li>
        <li><a href="http://localhost/link-4/">Link 4</a></li>
    </ul>
</div>

Answer 1

Вы можете сделать метод в php, вот пример:

<div id="nav">
    <ul>
        <li><a href="http://localhost/link-1/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-1')?>>Link 1</a></li>
        <li><a href="http://localhost/link-2/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-2')?>>Link 2</a></li>
        <li><a href="http://localhost/link-3/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-3')?>>Link 3</a></li>
        <li><a href="http://localhost/link-4/" <?=$activateLink($_SERVER['REQUEST_URI'],'/link-4')?>>Link 4</a></li>
    </ul>
</div>
<?php
function activateLink($uri,$var) 
{
    if($uri==$var) {
        return 'class="active"';
    }
}
?>

На каждой странице выведите $ _SERVER ['REQUEST_URI'] и передайте второй параметр методу.

Answer 2

Я не в состоянии проверить это прямо сейчас, дайте мне знать, если это работает для вас.

var menuArray = new Array();

$(function() {


    $('div#nav ul li').each(function(i) {
        menuArray[i] = this;
        $(this).click(function() {
            for (var x in menuArray)
                if (x == this)
                    $(x).attr('class','active');
                else
                    $(x).attr('class','inactive');
        });
    });
});

РЕДАКТИРОВАТЬ хорошо, я смогчтобы проверить это, и это работает для меня.Помните, что это должно быть после вашей HTML-декларации.

$("li a").each(function(i) {
        $(this).click(function() {
             $(this).attr('class','selected');
             $("li a").not(this).attr('class','notselected');
        });
});

Answer 3

Это не вообще требует PHP, однако вы можете построить его на PHP.Я покажу вам, как построить это в HTML / CSS.

Попробуйте этот CSS / HTML в вашем документе (перед вашим кодом):

<style>
       .active {
             color:#336699;
       }

       div#nav ul li a {
             color:#121212;
       }

       div#nav ul li a:visited {
             color:#336699;
       }
</style>

Это должно закрасить все ссылки синимесли они были посещены, и если они не имеют, это будет темно-серый.Однако, если вы хотите, чтобы он выделил только одну ссылку, лучше всего использовать JQuery, так как он имеет множество функций для выбора только той, которая выбирается.

Надеюсь, это поможет.