ASP.NET----jquery实现同一页面无刷新层次效果
2011-08-25 11:37
1041 查看
鼠标移动到各个选项上实现同一页面的无刷新层次效果，最近网上这种建站效果很多！今日正好项目需要在此一提：
主要通过css与jquery控制div层标签实现，细看下面代码中的div层定义如：
xfz="1"......
dfz="1".....
脚本代码：
<script type="text/javascript">
function Show_list_div($z, $kk) {
for ($i = 1; $i <= $kk; $i++) {
$div_name = "tags_content_" + $i;
$title_name = "tags_title_" + $i;
$object = document.getElementById($div_name);
$objects = document.getElementById($title_name);
if ($i == $z) {
$object.style.display = 'block';
$objects.className = 'tags_at';
}
else {
$object.style.display = 'none';
$objects.className = 'tags_none';
}
}
}
</script>
<script type="text/javascript">
$("*[xfz]").hover(function () {
$("*[xfz]").css({ "color": "#117dbe", "font-weight": "400", "background": "" })
$(this).css({ "color": "#188718", "font-weight": "bold", "background": "#fff" })
$("*[dfz]").css({ "display": "none" })
var number = $(this).attr("xfz");
$("*[dfz='" + number + "']").css({ "display": "block" })
})
</script>
<script type="text/javascript">
var tempurl = location.search;
tempurl = "*[xfz='" + tempurl.substr(3) + "']";
$(tempurl).each(function () {
$("*[xfz]").css({ "color": "#000000", "font-weight": "400" })
$("*[dfz]").css({ "display": "none" })
$(this).css({ "color": "#188718", "font-weight": "bold", "background": "#fff" })
var number = $(this).attr("xfz");
$("*[dfz='" + number + "']").css({ "display": "block" })
})
</script>页面布局：
<body> <div style=" position:relative; width:988px; height:auto !important; height:430px; min-height:430px; overflow:auto !important; overflow:visible; border-color:#e7e7e7; border-style:solid; border-width:1px; margin:1px auto; "> <div style="position:relative;background:url(Source/Img/zxzc1.gif) repeat; width:988px; height:30px; border-bottom-color:#e7e7e7; border-bottom-style:solid; border-bottom-width:1px; margin:0px auto; "> <div xfz="1" style=" position:absolute; cursor:pointer; width:95px; height:25px;border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;border-top:1px solid #e7e7e7; left:107px; top:5px; text-align:center;font-size:14px; line-height:25px;font-weight:bold;color:#188718; background-color:#fff; ">接机用车</div> <div xfz="2" style=" position:absolute; cursor:pointer;width:95px; height:25px;border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;border-top:1px solid #e7e7e7; background:transparent; left:210px; top:5px;text-align:center;font-size:14px; line-height:25px;color:#117dbe;">送机用车</div> <div xfz="3" style=" position:absolute;cursor:pointer; width:95px; height:25px; border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;border-top:1px solid #e7e7e7; background:transparent; left:313px; top:5px;text-align:center;font-size:14px; line-height:25px;color:#117dbe;">旅游用车</div> <div xfz="4" style=" position:absolute; cursor:pointer;width:100px; height:25px;border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;border-top:1px solid #e7e7e7;background:transparent; left:415px; top:5px;text-align:center; font-size:14px; line-height:25px;color:#51a601;">DIY旅游线路</div> <div xfz="5" style=" position:absolute; cursor:pointer;width:110px; height:25px;border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;border-top:1px solid #e7e7e7;background:transparent; left:523px; top:5px;text-align:center;font-size:14px; line-height:25px;color:#117dbe;">填写自定义行程</div> </div> <!--接机服务--> <div dfz="1" style=" position:relative; width:988px; height:357px; margin:0px auto; margin-top:20px; display:block; "> <div style=" position:relative; width:988px; height:88px; margin:0px auto;border-bottom-color:#e7e7e7; border-bottom-style:solid; border-bottom-width:1px; "> <span style=" font-family:宋体; font-size:14px;line-height:42px; padding-left:20px;">发车时间:</span> </div> <div style=" position:relative; width:988px; height:88px; margin:0px auto;"> <span style=" font-family:宋体; color:#188718;font-size:14px;line-height:42px;padding-left:20px;">接机信息</span><br/> <span style=" font-family:宋体; font-size:14px; padding-left:20px; padding-right:10px;">接机机场:</span> </div> <div style=" position:relative; width:988px; height:98px;border-bottom-color:#e7e7e7; border-bottom-style:solid; border-bottom-width:1px; margin:0px auto;"> <span style=" font-family:宋体; font-size:14px;color:#188718;line-height:42px;padding-left:20px;">送达地点:</span><br/> <span style=" font-family:宋体; font-size:14px; padding-left:20px; padding-right:10px;">送达地区:</span> </div> </div> <!--送机服务--> <div dfz="2" style=" position:relative; width:988px; height:357px; margin:0px auto; margin-top:20px; display:none;"> <div style=" position:relative; width:988px; height:88px; margin:0px auto;border-bottom-color:#e7e7e7; border-bottom-style:solid; border-bottom-width:1px; "> <span style=" font-family:宋体; font-size:14px;line-height:42px; padding-left:20px;">发车时间:</span> </div> <div style=" position:relative; width:988px; height:88px; margin:0px auto;"> <span style=" font-family:宋体;color:#188718; font-size:14px;line-height:42px;padding-left:20px;">送机信息</span><br/> <span style=" font-family:宋体; font-size:14px; padding-left:20px; padding-right:10px;">送机机场:</span> </div> <div style=" position:relative; width:988px; height:98px;border-bottom-color:#e7e7e7; border-bottom-style:solid; border-bottom-width:1px; margin:0px auto;"> <span style=" font-family:宋体; color:#188718;font-size:14px;line-height:42px;padding-left:20px;">送达地点</span><br/> </div> </div> <!--旅游服务--> <div dfz="3" style=" position:relative; width:988px; height:auto !important; height:357px; min-height:357px; overflow:hidden; margin:0px auto; margin-top:10px; display:none;"> <div style=" position:relative; width:988px; height:50px; margin:0px auto;border-bottom-color:#e7e7e7; border-bottom-style:solid; border-bottom-width:1px;"> <span style=" font-family:宋体; font-weight:bold;font-size:14px;line-height:42px; padding-left:15px;">发车时间:</span> </div> <div style=" position:relative; width:988px; height:auto !important; height:58px; min-height:58px; overflow:auto !important; overflow:visible; padding-top:10px; margin:0px auto;border-bottom-color:#188718; border-bottom-style:solid; border-bottom-width:1px;"> <span style="position:relative;color:#188718;font-size:14px;bottom:5px;left:10px;">旅游目的地：<span style="color:#117dbe;font-weight:bold;">无锡</span></span> </div> <!--自定旅游服务--> <div dfz="4" style=" position:relative; width:988px; height:auto !important; height:440px; min-height:425px; overflow:auto !important; overflow:visible; margin:0px auto; margin-top:20px; display:none; "> <div style=" position:relative; width:988px; height:88px; margin:0px auto;border-bottom-color:#e7e7e7; border-bottom-style:solid; border-bottom-width:1px; "> </div> </div> <!--自定义服务--> <div dfz="5" style=" position:relative; width:988px; height:auto !important; height:440px; min-height:425px; overflow:auto !important; overflow:visible; margin:0px auto; margin-top:20px; display:none; "> <div style=" position:relative; width:988px; height:88px; margin:0px auto; border-bottom-color:#e7e7e7; border-bottom-style:solid; border-bottom-width:1px;"> </div> </div> </div> </body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- asp.net 中实现页面每隔一分钟刷新一次的效果
- 在ASP.NET MVC中使用Jquery实现页面局部刷新
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- ASP.NET 2.0中实现无刷新页面
- Asp.net"页面加载中"效果实现
- 在ASP.NET MVC中使用Juqery实现页面局部刷新
- dhl:asp.net mvc下用jQuery ajax方法实现无刷新分页（用户控件）& 整体页面无刷新（2010-11-13 add）
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- Asp.net"页面加载中"效果实现
- Asp.net MVC3 企业网站系统高仿博客园 首页左侧列表页面 实现效果
- ASP.NET—015：ASP.NET中无刷新页面实现
- Asp.net + jQuery + jQuery pager plugin + Sql Server 利用Ajax实现真正的无刷新分页浏览
- Asp.net_JQuery+Json实现简单据查询页面
- 最优化实现ASP.NET页面的返回和刷新机制
- ASP.NET页面刷新的实现方法
- JQuery和ASP.NET分别实现级联下拉框效果
- 在asp.net中使用JQuery的SlideViewer插件实现图片的滚动效果