[求助]ajax 实现新闻切换 - jQuery论坛

得分:0

回复：（ccsky）[求助]ajax 实现新闻切换

在<<游戏资讯>>或<<折扣资讯>>这两个span标签的onclick事件中,添加一个ajax方法就可以了.根据传入的菜单编号的不同传入不同的文章标题
这里不多言,看下面是源码:

/*
方法名称:GetContent
功能:使用ajax方法得到相关菜单的内容
参数:menu_id long 此菜单的编号

*/
function GetContent(menu_id,curLalel)
{

for(var i = 1 ; i <= 3;i++)
{
tdColor = "#73BDE7";
if("tdMenu_" + i == curLalel.parentNode.id)
{
tdColor = "#ffffff";
}
document.getElementById("tdMenu_" + i).style.backgroundColor = tdColor;
}

_Default.GetMenuContent(menu_id,CallBack_GetContent);
}
function CallBack_GetContent(res)
{
var strOut = res.value;
document.getElementById("divContent").innerHTML = strOut;
}

这是菜单的相关代码,即调用js的各个label

下面是内容的显示,只用div来装就OK了.

再以下是cs端的ajax方法实现:

/// <summary>
/// 根据编号得到相应的菜单内容
/// </summary>
/// <param name="menu_id">菜单编号</param>
/// <returns>相应innerHTML内容</returns>
[AjaxPro.AjaxMethod]
public string GetMenuContent(long menu_id)
{
string strOut = "";
//一般而言是根据menu_id得到此menu下所有的文章的title和title_id 然后根据这两个可以找到那些文章.这里简化直接返回字符串
switch(menu_id)
{
case 0:
strOut = "折扣资讯的内容可自行添加HTML代码";
break;
case 1:
strOut += "<ul style=\"list-style:none;\">";
strOut += "<li>";
strOut += "<span style=\"font-size:14px;color:#B22222\">怀念<<童年>>10月22日15:00梦幻内测!";
strOut += "</li>";
strOut += "<li>";
strOut += "<span style=\"font-size:14px;color:#B22222; text-decoration: underline;\">玩游戏被钱追,玩<<战火>>享受双工资";
strOut += "</li>";
strOut += "</ul>";
strOut += "<hr/>";
strOut += "<ul style=\"list-style-type:square;text-decoration: underline;\">";
strOut += "<li>";
strOut += "<span style=\"color:#063FA8;\">怀念<<童年>>10月22日15:00梦幻内测!";
strOut += "</li>";
strOut += "<li>";
strOut += "<span style=\"color:#063FA8;\">玩游戏被钱追,玩<<战火>>享受双工资";
strOut += "</li>";
strOut += "</ul>";
break;
case 2:
strOut = "铁三角的内容可自行添加HTML代码";
break;
default:
strOut = "其它内容";
break;

}

return strOut;

}

以上就是整个的代码段,你把它粘入相应的区域就可以看到效果!本文使用ajaxpro框架,记得安装就可以了,不明白的M我
附送两张截图看效果:

[此贴子已经被作者于2007-11-2 10:02:51编辑过]