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

您应该查看链接的CSS伪类（例如see here）。如果你不想突出显示所有链接，你可以在php代码中添加一个class属性，然后在css中使用它来进一步专门化伪类，例如：

给出你的phpcode（带有类）创建的以下链接：

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

您现在可以使用以下css选择器设置该链接的样式：

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

现在，当您将鼠标移到链接上时，将突出显示该链接。其他伪类允许您设置链接的样式。有关链接的可用伪类，请参阅上面的参考。

Answer 2

在链接中添加课程。您生成的html应如下所示：

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

您必须使用.live（）方法来允许新添加的元素将“click”事件处理程序绑定到它们：

$(document).ready(function(){
    $('a.clickable').live('click',function(){
        $(this).css("background-color","yellow");
    });
});

这会将<a>的背景更改为黄色。要改变<li>的背景，请使用$(this).parent().css()。

使用此方法，一旦设置了背景，您就无法在重新加载页面或触发其他事件之前将其关闭。

如果您希望突出显示能够打开和关闭，请为其创建一个CSS类（例如.highlight）并将background-color: yellow添加到该类。然后代替：

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

您可以使用：

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

Answer 3

这应该很简单，使用以下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 */
}

Demo at: JS Fiddle

已编辑以添加以下内容：

如果您尝试在页面加载时分配“活动”（或其他任何）类，并且链接指向您网站的其他部分，则以下内容可能对您有用：

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

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

实际上它将当前页面的url分配给变量'topUrl'，并检查每个li元素中的任何链接是否链接到当前页面，如果是，则指定类“活跃”到该链接。它的当前版本确实需要a元素'href属性中的绝对（非相对）路径。

<小时/> 已编辑以稍微优化脚本，以删除href中绝对路径的要求。

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

在这个版本中，URL在/字符上拆分，返回数组的最后一部分存储在topUrl变量中。 jQuery 然后在a元素中查找li元素，以查看这些元素中的任何元素是否在同一部分中结束，因此：

www.example.com/index.html

会将“有效”类分配给a以href结尾的任何index.html元素，这显然不是没有问题。

如何突出显示PHP生成的嵌套列表中的链接

3 个答案: