_POST和CSS，如何显示一个活动链接 - PHP: _POST and CSS, how to show an active link

PHP: _POST and CSS, how to show an active link

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

假设您通过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/

似乎您正在使用Ajax。JS脚本可以做到这一点。下面是我将如何尝试在JS

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

为了进一步阅读，我建议使用jQuery编写这个示例

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>