PHP：_POST 和 CSS，如何显示活动链接答案

【问题标题】：PHP: _POST and CSS, how to show an active linkPHP：_POST 和 CSS，如何显示活动链接
【发布时间】：2011-08-11 03:55:26
【问题描述】：

我有一个使用 PHP 构建的站点，并且有一个从 mySQL 动态加载数据的页面。它使用用户单击的列表项，导致 _POST 到数据库，因此不允许我自定义他们现在看到的页面的 CSS。我想知道是否有办法动态设置他们点击的<li> 的css 类，以突出显示它。问题是，如果他们按下另一个列表项，我必须取消突出显示旧的。有人对解决此问题的最佳方法有意见吗？

【问题讨论】：

您是说单击列表项会通过 AJAX 发送发布请求，并且您希望在单击时一次仅突出显示一个列表项？

标签： php javascript mysql html css

【解决方案1】：

假设您通过 AJAX 提交 POST 请求，添加类似这样的内容（我将假设您已经解决了 AJAX 部分）

// var context is a previously identified container for the list items

var items = context.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function() {
        // do AJAX stuff

        // remove the "highlight" class from all list items
        for (var j = 0; j < items.length; j++) {
            var classname = items[j].className;
            items[j].className = classname.replace(/\bhighlight-class-name\b/i, '');
        }

        // set the "highlight" class on the clicked item
        this.className += ' highlight-class-name';
    }, false);
}

在这里演示 - http://jsfiddle.net/jYdMB/

【讨论】：

【解决方案2】：

看来您正在使用 Ajax。一个 JS 脚本可以做到这一点。这是我将在 JS 中尝试的方法

创建具有唯一 ID 的 lis
使用 jquery/prototype/xyz 工具包将点击事件绑定到这些 lis 上
一旦收到点击，我就会查看事件目标并尝试在其上设置或重置类名

为了进一步阅读，我将在 jQuery 中推荐这个示例。

【讨论】：

【解决方案3】：

jQuery 答案：http://jsfiddle.net/qYUAz/

<style type="text/css">
#myNav .active{ 
    color:red;
    font-weight:bold;
}
</style>


<ul id="myNav">
    <li><a href="#1">link 1</a></li>
    <li><a href="#2">link 2</a></li>
    <li><a href="#3">link 3</a></li>
</ul>

<script type="text/javascript">
$('#myNav a').click(function(){
    $('#myNav a').removeClass('active');
    $(this).addClass('active');    
});
</script>

【讨论】：