注册 登录
编程论坛 jQuery论坛

[求助]ajax 实现新闻切换

ccsky 发布于 2007-10-22 15:47, 1655 次点击

只有本站会员才能查看附件,请 登录

点击 折扣资讯 游戏资讯 就会出现相应的新闻标题 。 这个是怎么实现的呢 ?
我用过iframe 可iframe老出问题

在此请教各位解决办法了
1 回复
#2
爱像深蓝2007-11-02 09:57
回复:(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
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;background-color:#73BDE7;text-align:center">
<tr>
<td style="width: 80px" id="tdMenu_1">
<asp:Label ID="lblShowMenu1" runat="server" Text="折扣资讯" onclick="GetContent(0,this)" Font-Size="14px"></asp:Label>
</td>
<td style="width: 80px" id="tdMenu_2">
<asp:Label ID="lblShowMenu2" runat="server" Text="游戏资讯" onclick="GetContent(1,this)" Font-Size="14px"></asp:Label>
</td>
<td style="width: 80px" id="tdMenu_3">
<asp:Label ID="lblShowMenu3" runat="server" Text="铁三角" onclick="GetContent(2,this)" Font-Size="14px"></asp:Label>
</td>
<td style="width: 80px;">
</td>
<td style="width: 410px">
</td>
</tr>
</table>

下面是内容的显示,只用div来装就OK了.
<div id="divContent"></div>

再以下是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编辑过]

1