使用Ajax的动态菜单

时间:2012-02-27 14:39:35

标签: php javascript jquery ajax

我正在从数据库创建用户的动态菜单。当用户点击配置文件时,我需要突出显示该配置文件。这是配置文件的菜单。我的菜单效果很好,我需要有关如何突出显示菜单元素的帮助。谢谢你的帮助。

function childMenu(profileId){

var path = location.pathname;

    $.ajax({
    type: 'POST',
    url: '',                  //the script to call to get data          
    data: "method=getChildProfile&profileId="+profileId,  //requirements 
    dataType: 'xml',                        //data format      
    success: function(xml)     
    {  
    $(xml).find('Child').each(function()
    {   
    var proId = $(this).attr('profileId');
    var lName = $(this).find('lName').text();
    var fName = $(this).find('fName').text();

    $("#childMenu").append("<li><a href='"+path+"?child="+proId+"&fName="+fName+"&lName="+lName+"'></a></li>");

    });
    }
    });

}   

2 个答案:

答案 0 :(得分:1)

如果我找对你:(如果不是你想要的评论,我会编辑我的答案)

编辑追加行:

$("#childMenu").append("<li><a href='"+path+"?child="+proId+"&fName="+fName+"&lName="+lName+"' onClick='javascript:doHighlight(this)'>???</a></li>");

为你的JS添加一个新功能:

function doHighlight(elem)
{
 if(elem.className == "highlighted")
   elem.className = "";
 else
   elem.className = "highlighted";
}

在你的CSS中添加一个类:

.highlighted{
 background-color:yellow;
}

答案 1 :(得分:1)

在您构建菜单后,您需要添加一个点击事件处理程序,该处理程序将突出显示您的<li>

$('#childMenu li').click(function() {
    $('#childMenu li.selected').removeClass('selected');
    $(this).addClass('selected');
});

然后您可以使用

获取所选的<li>
$('#childMenu li.selected')

您还可以编辑.select css类来更改背景颜色以及您需要的任何其他颜色。