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>

　　

　　

posted @ 2011-08-25 11:37  brainmao  阅读(699)  评论(0)  编辑  收藏  举报