PHP:_POST和CSS,如何显示活动链接

PHP:_POST和CSS,如何显示活动链接,php,javascript,mysql,html,css,Php,Javascript,Mysql,Html,Css,我有一个用PHP构建的站点,还有一个从mySQL动态加载数据的页面。它使用用户单击的列表项,导致数据库中出现帖子,因此不允许我自定义他们现在看到的页面的CSS。我想知道是否有一种方法可以动态设置他们点击的的css类,以突出显示它。问题是,如果他们按下另一个列表项,我必须取消突出显示旧的列表项。任何人都有关于这方面的最佳方法的意见吗?似乎您正在使用Ajax。JS脚本可以做到这一点。下面是我将如何在JS中尝试这一点 创建具有唯一ID的lis 使用jquery/prototype/xyz toolk

我有一个用PHP构建的站点,还有一个从mySQL动态加载数据的页面。它使用用户单击的列表项,导致数据库中出现帖子,因此不允许我自定义他们现在看到的页面的CSS。我想知道是否有一种方法可以动态设置他们点击的
  • 的css类,以突出显示它。问题是,如果他们按下另一个列表项,我必须取消突出显示旧的列表项。任何人都有关于这方面的最佳方法的意见吗?

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

    • 创建具有唯一ID的lis
    • 使用jquery/prototype/xyz toolkit将单击事件绑定到这些lis
    • 收到单击后,我立即查看事件目标并尝试在其上设置或重置类名

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

    假设您通过AJAX提交POST请求,添加类似的内容(我将假设您已经解决了AJAX部分)

    //var context是以前为列表项标识的容器
    var items=context.getElementsByTagName('li');
    对于(变量i=0;i
    此处演示-

    jQuery答案:

    
    #myNav.active{
    颜色:红色;
    字体大小:粗体;
    }
    
    $('#myNav a')。单击(函数(){ $('myNav a').removeClass('active'); $(this.addClass('active'); });
    您是说单击列表项会通过AJAX发送post请求,并且您希望在单击时一次只突出显示一个列表项?
    // 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);
    }
    
    <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>