| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1655 人关注过本帖
标题:[求助]ajax 实现新闻切换
只看楼主 加入收藏
ccsky
Rank: 2
等 级:论坛游民
帖 子:197
专家分:49
注 册:2006-1-10
收藏
 问题点数:0 回复次数:1 
[求助]ajax 实现新闻切换

图片附件: 游客没有浏览图片的权限,请 登录注册

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

在此请教各位解决办法了
搜索更多相关主题的帖子: ajax 
2007-10-22 15:47
爱像深蓝
Rank: 1
等 级:新手上路
帖 子:52
专家分:0
注 册:2007-7-10
收藏
得分: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
<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编辑过]

2007-11-02 09:57
快速回复:[求助]ajax 实现新闻切换
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.025599 second(s), 10 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved