在<<游戏资讯>>或<<折扣资讯>>这两个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编辑过]
