这里不多言,看下面是源码:
方法名称: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;
}
<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了.
再以下是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;
}
附送两张截图看效果:
[此贴子已经被作者于2007-11-2 10:02:51编辑过]