ASP.NET----jquery实现同一页面无刷新层次效果
鼠标移动到各个选项上实现同一页面的无刷新层次效果，最近网上这种建站效果很多！今日正好项目需要在此一提：
主要通过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>