Как выделить ссылку из вложенного списка, сгенерированного PHP

Question

У меня есть PHP-скрипт, который отображает все мои темы во вложенном списке, и я хочу иметь возможность щелкнуть ссылку, и при этом она будет выделена, но я не знаю, как это сделать с моим текущим кодом , может кто-нибудь помочь мне с этим?

Я использую PHP, CSS и JQuery

Вот мой PHP-код для отображения всех моих тем во вложенных списках.

function make_list ($parent = 0, $parent_url = '') {
    global $link;
    echo '<ol>';                
    foreach ($parent as $id => $cat) {
        $url = $parent_url . $cat['url'];
        echo '<li><a href="' . $url . '" title="' . $cat['category'] . ' Category Link">' . $cat['category'] . '</a>';          

        if (isset($link[$id])) {
            make_list($link[$id], $url);
        }               
        echo '</li>';
    }       
    echo '</ol>';
}

$mysqli = mysqli_connect("localhost", "root", "", "sitename");
$dbc = mysqli_query($mysqli,"SELECT * FROM categories ORDER BY parent_id, category ASC");
if (!$dbc) {
    print mysqli_error();
} 

$link = array();
while (list($id, $parent_id, $category, $url) = mysqli_fetch_array($dbc)) {
    $link[$parent_id][$id] =  array('category' => $category, 'url' => $url);
}

make_list($link[0]);

Answer 1

Добавьте класс к своим ссылкам.Ваш сгенерированный html должен выглядеть примерно так:

<ol>
  <li><a href="#" class="clickable">Link Text</a></li>
</ol>

Вы должны использовать метод .live (), чтобы позволить вновь добавленным элементам иметь привязанный к ним обработчик события click:1005 *

Это изменит фон <a> на желтый.Чтобы изменить фон <li>, используйте $(this).parent().css().

. С помощью этого метода после установки фона его нельзя отключить, пока страница не будет перезагружена или вы не вызовете другое событие.*

Если вы хотите, чтобы подсветка могла включаться и выключаться, создайте для нее CSS-класс (например, .highlight) и добавьте background-color: yellow к классу.Тогда вместо:

$(this).css("background-color","yellow");

Вы можете использовать:

$(this).toggleClass('highlight');

Answer 2

Это должно быть достаточно просто со следующим jQuery:

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

и CSS:

a.active:link,
a.active:visited {
    background-color: #ffa; /* or whatever */
}
a.active:hover {
    text-decoration: underline;
    background-color: #f90; /* or, again, whatever */
}

Демонстрация по адресу: JS Fiddle .

<ч />

Отредактировано для добавления следующего:

Если вы пытаетесь назначить «активный» (или любой другой) класс при загрузке страницы, а ссылки относятся к другим частям вашего сайта, то вам может пригодиться следующее:

$(document).ready(
    function() {
        var topUrl = location.href;

        $('li a').each(
            function() {
                if ($(this).attr('href') == topUrl) {
                    $(this).addClass('active');
                }
            });
    });

По сути, он присваивает URL-адрес текущей страницы переменной topUrl и проверяет, ссылаются ли какие-либо ссылки в каждом из элементов li на текущую страницу, и, если это так, назначает класс active к этой ссылке. В текущем воплощении он требует абсолютных (не относительных) путей в атрибутах a elements 'href.

<ч /> Отредактировано , чтобы несколько улучшить сценарий, чтобы убрать требование абсолютных путей в href s.

$(document).ready(
    function() {
        var topUrl = location.href.split('/').pop();
        $('li a[href$=' + topUrl + ']').addClass('active');
    });

В этом воплощении URL разделен на символ /, а последний раздел возвращенного массива хранится в переменной topUrl. JQuery then ищет элемент a в элементе li, чтобы определить, заканчивается ли какой-либо из этих элементов одной и той же частью, поэтому:

www.example.com/index.html

назначит класс 'active' любому элементу a, чей href оканчивается на index.html, что явно не без проблем.

Answer 3

Вы должны посмотреть псевдоклассы CSS для ссылок ( см. Здесь , например).Если вы не хотите выделять все ссылки, вы не можете добавить атрибут class в код php, а затем использовать его в css для дальнейшей специализации псевдоклассов, например:

Учитывая следующую ссылку, созданную вашим phpcode(с классом):

<li><a href="http://..." class="highlightedLink">Some Text</a></li>

Теперь вы можете стилизовать эту ссылку, используя следующий селектор CSS:

a.highlightedLink:hover {
    background-color: Gray;
    color: white;
}

Теперь она будет выделять ссылку, когда вы наводите курсор мыши на ссылку,Другие псевдо-классы позволяют стилизовать ссылку.Обратитесь к приведенной выше ссылке для получения доступных псевдоклассов для ссылок.