Ajax标签导航效果

最新推荐文章于 2022-03-28 22:59:43 发布
最新推荐文章于 2022-03-28 22:59:43 发布
阅读量1k 收藏
点赞数
分类专栏： ajax 文章标签： ajax class div border function xmlhttprequest

[function.js] 

<!--
function  getObject(objectId)  {
     if(document.getElementById && document.getElementById(objectId)) {
    // W3C DOM
       return document.getElementById(objectId);
     } 
     else if (document.all && document.all(objectId)) {
    // MSIE 4 DOM
       return document.all(objectId);
     } 
     else if (document.layers && document.layers[objectId]) {
    // NN 4 DOM.. note: this won't find nested layers
       return document.layers[objectId];
     } 
     else {
       return false;
    }
}  

 var  responsecont;
 var  xmlHttp;
 var  requestType;
 var  newsstring;

 function  CreateXMLHttpRequest() {
   // Initialize Mozilla XMLHttpRequest object
   if (window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest();
   } 
   // Initialize for IE/Windows ActiveX version
   else if (window.ActiveXObject) {
       try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
       } 
       catch (e){
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e){newsstring = "服务器繁忙,请稍后重新连接！";}
       }
   }
}

function  getnews(tagid,x) {
   var url = tagid+'_'+x+'.htm';
   requestType = tagid;
   CreateXMLHttpRequest();   
   
   xmlHttp.onreadystatechange = processRequestChange;
   xmlHttp.open("GET", url, true);
   xmlHttp.setRequestHeader("If-Modified-Since","0");
   xmlHttp.send(null);  
}

function  processRequestChange() {
   // only if xmlHttp shows "complete"
   if (xmlHttp.readyState == 4){
      // only http 200 to process
      if (window.location.href.indexOf("http")==-1 || xmlHttp.status == 200){          
　　　newsstring = xmlHttp.responseText;
         //inject centent to tab-pane
            shownews(requestType,newsstring);
      }
   }
}

function  shownews(requestType,newsstring) {
//<![CDATA[
    responsecont = getObject(requestType+'_cnt');
    responsecont.innerHTML = newsstring;
//]]>
}

function  TabNews(tagid,x) {
    for (var i=1;i<=7;i+=2) {
         if (i == x) {
            getObject(tagid+i).className="tabactive"+i;
            if(i!=1){
               getObject(tagid+(i-1)).style.display="none";               
               if(i!=7){
                  getObject(tagid+(i+1)).style.display="none";
               }                 
            }
            if(i==1){
               getObject(tagid+"2").style.display="none";
            } 
            try{            
               getnews(tagid,i);
            }
            catch(e){
               alert(e);
            }  
        }
        else
        {
            getObject(tagid+i).className="";            
            if(i!=7){
               getObject(tagid+(i+1)).style.display="block";
            }             
        }         
   }
}
// -->

[style.css]

body { margin: 0;padding: 0;background: #FFF;color: #000;font: normal 12px 宋体,arial,sans-serif;text-align: left;}
div,form,ul,ol,li,span,p  {border: 0;margin: 0;padding: 0;}

/*链接样式*/
a:link {color: #000;text-decoration: none;}
a:visited {color: #000;text-decoration: none;}
a:hover {color: #16387C;text-decoration: underline;}

/*清除float*/
.clear { clear: both; font-size:1px; visibility: hidden; }

/*空格*/
.blank2 {font-size: 1px;height: 2px;margin: 0 auto;width: 962px;}
.blank5 {font-size: 1px;height: 5px;margin: 0 auto;width: 950px;}
.sblank2 {font-size: 1px;height: 2px;margin: 0 auto;width: 100px;}
.sblank3 {font-size: 1px;height: 3px;margin: 0 auto;width: 100px;}
.sblank5 {font-size: 1px;height: 5px;margin: 0 auto;width: 400px;}
.sblank7 {font-size: 1px;height: 7px;margin: 0 auto;width: 400px;}

/*边距*/
.margin-right {margin-right: 6px;}
.margin-right-left {margin-right: 3px; margin-left:3px;}

/*字体颜色*/
.fcborange {color: #F0741A;font: bold 12px arial,sans-serif;}
.fcred {color:#FF0000;}
.fcwhite {color:#FFF;font:normal 13px 宋体,arial,sans-serif;letter-spacing:1px;}

/*新闻标签导航*/
.news_tabsnav {
    background: url(../images/tab_bg.gif) #FFF left top repeat-x;
    border: solid #B0BEC7;
    border-width: 0 1px 0 1px;
    height: 22px;
    margin: 0 auto;
    padding: 0;
    width: 506px;
}

.news_tabsnav .tabsmenu {
    height: 22px;
}

.news_tabsnav .tab_sline  {
    padding-top: 3px;
    width: 2px;
}

.news_tabsnav li  {
    color: #18397C;
    display: inline;
    float: left;
    font: normal 12px 宋体,arial,sans-serif;
    letter-spacing: 1px;
    list-style-type: none;
    margin: 0;
    padding-top: 4px;
    text-align: center;
    width: 120px;
}

/*导航菜单点击后的样式*/
.news_tabsnav .tabactive1 {
    background: url(../images/tab_active1.gif);
    color: #F26400;
    font: bold 12px 宋体,arial,sans-serif;
    height: 18px;
    letter-spacing: 1px;
    padding-top: 4px;
    text-align: center;
    width: 120px;
}

.news_tabsnav .tabactive3 {
    background: url(../images/tab_active2.gif);
    color: #F26400;
    font: bold 12px 宋体,arial,sans-serif;
    height: 18px;
    letter-spacing: 1px;
    padding-top: 4px;
    text-align: center;
    width: 120px;
}

.news_tabsnav .tabactive5 {
    background: url(../images/tab_active2.gif);
    color: #F26400;
    font: bold 12px 宋体,arial,sans-serif;
    height: 18px;
    letter-spacing: 1px;
    padding-top: 4px;
    text-align: center;
    width: 120px;
}

.news_tabsnav .tabactive7 {
    background: url(../images/tab_active2.gif);
    color: #F26400;
    font: bold 12px 宋体,arial,sans-serif;
    height: 18px;
    letter-spacing: 1px;
    padding-top: 4px;
    text-align: center;
    width: 120px;
}

/*最新消息主体*/
.news_content {
    border: solid #B0BEC7;
    border-width: 0 1px 1px 1px;
    margin: 0 auto;
    width: 506px;
}

/*推荐新闻列表*/
.news_list {
    height: 120px;
    margin: 0 auto;
    width: 492px;
}

.news_list img {
    border: 1px solid #9EB1C0;
    float: left;
    height: 115px;
    margin: 0;
    padding: 1px;
    width: 154px;
    cursor: pointer;
}

.news_list .new_top7 {
    float: right;
    height: 120px;
    margin: 0;
    width: 325px;
}

.news_list .new_top7 li {
    float: left;
    font: normal 13px 宋体,sans-serif;
    height: 12px;
    letter-spacing: 1px;
    list-style-type: none;
    margin: 0;
    padding: 0 0 5px 0!important;
    padding: 0 0 2px 0;
    width: 322px;
}

.news_list .new_top7 li a:link,a:visited {
    color: #18397C;
}

.news_list .new_top7 li a:hover {
    color: #FF0000;
}

/*LOGO广告*/
.logos {
    margin: 0 auto;
    width: 488px;
    height: 44px;
    padding: 1px !important;
    border: 1px solid #9EB1C0;
}

.logoscnt {
    margin: 0 auto;
    width: 488px;
    height: 31px !important;
    height: 29px;
    padding: 6px 0 7px 0 !important;
    padding: 4px 0 5px 0;
    text-align: center;
    background: url(../images/logos_bg.gif);
}

/*基本信息统计*/
.siteinfo {
    height: 12px;
    letter-spacing: 1px;
    margin: 0 auto;
    padding: 4px 0 4px 0 !important;
    padding: 2px 0 2px 0;
    text-align: center;
    width: 490px;
}

[CODE]

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 标签导航 </ title >
< meta  name ="Author"  content ="Robert"   />
< link  href ="css/style.css"  rel ="stylesheet"  type ="text/css"   />
< script  language ="javascript"  type ="text/javascript"  src ="js/function.js" ></ script >
</ head >
< body >
< div  class ="sblank2" ></ div >
< div  class ="news_tabsnav" >
                < ul  class ="tabsmenu" >
                   < li  class ="tabactive1"  style ="cursor:pointer"  id ="tab1"  onclick ="TabNews('tab',1)" > 推荐信息 </ li >
                   < li  class ="tab_sline"  style ="display:none"  id ="tab2" >< img  src ="images/tab_sline.gif"  alt ="分割线"   /></ li >
                   < li  style ="cursor:pointer"  id ="tab3"  onclick ="TabNews('tab',3)" > 最新折扣信息 </ li >
                   < li  class ="tab_sline"  id ="tab4" >< img  src ="images/tab_sline.gif"  alt ="分割线"   /></ li >
                   < li  style ="cursor:pointer"  id ="tab5"  onclick ="TabNews('tab',5)" > 最新团够信息 </ li >
                   < li  class ="tab_sline"  id ="tab6" >< img  src ="images/tab_sline.gif"  alt ="分割线"   /></ li >
                   < li  style ="cursor:pointer"  id ="tab7"  onclick ="TabNews('tab',7)" > 最新活动信息 </ li >
                </ ul >< div  class ="clear" ></ div >       
 </ div >
< div  class ="news_content" >
                   < div  id ="tab_cnt" >
                < div  class ="sblank2" ></ div >
                < div  class ="news_list" >
                     < img  src ="images/gyy.jpg"  alt ="推荐图片新闻"  width ="154"  height ="115"  border ="0"   />
                     < ul  class ="new_top7" >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                     </ ul >
                     < div  class ="clear" ></ div >
                </ div >
                < div  class ="sblank2" ></ div >
                < div  class ="logos" >
                     < div  class ="logoscnt" >
                          < img  src ="images/clogo.gif"  class ="margin-right-left"  alt ="logo"   />< img  src ="images/clogo.gif"  class ="margin-right-left"  alt ="logo"   />< img  src ="images/clogo.gif"  class ="margin-right-left"  alt ="logo"   />< img  src ="images/clogo.gif"  class ="margin-right-left"  alt ="logo"   />< img  src ="images/clogo.gif"  class ="margin-right-left"  alt ="logo"   />                     
                     </ div >
                </ div >
                </ div >
                < div  class ="siteinfo" >
                  VIP会员共计 < span  class ="fcborange" > 10200 </ span > 家，今日注册 < span  class ="fcborange" > 68 </ span > 人，更新 < span  class ="fcborange" > 5365 </ span > 条信息，当前总在线 < span  class ="fcborange" > 62400 </ span > 人
                </ div >
</ div >
< div  class ="sblank2" ></ div >
< div  class ="news_tabsnav" >
                < ul  class ="tabsmenu" >
                   < li  class ="tabactive1"  style ="cursor:pointer"  id ="news1"  onclick ="TabNews('news',1)" > 华夏资讯推荐 </ li >
                   < li  class ="tab_sline"  style ="display:none"  id ="news2" >< img  src ="images/tab_sline.gif"  alt ="分割线"   /></ li >
                   < li  style ="cursor:pointer"  id ="news3"  onclick ="TabNews('news',3)" > 华夏动感宝贝 </ li >
                   < li  class ="tab_sline"  id ="news4" >< img  src ="images/tab_sline.gif"  alt ="分割线"   /></ li >
                   < li  style ="cursor:pointer"  id ="news5"  onclick ="TabNews('news',5)" > 华夏动漫世界 </ li >
                   < li  class ="tab_sline"  id ="news6" >< img  src ="images/tab_sline.gif"  alt ="分割线"   /></ li >
                   < li  style ="cursor:pointer"  id ="news7"  onclick ="TabNews('news',7)" > 华夏体育世界 </ li >
                </ ul >< div  class ="clear" ></ div >       
 </ div >
< div  class ="news_content" >
                   < div  id ="news_cnt" >
                < div  class ="sblank2" ></ div >
                < div  class ="news_list" >
                     < a  href ="#" >< img  src ="images/pic.jpg"  alt ="推荐图片新闻"  width ="154"  height ="115"  border ="0"   /></ a >
                     < ul  class ="new_top7" >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                             < li >< a  href ="#" > PRG全棉短袖衬衣最后的抢购机抢购机 </ a >  2006-08-15 </ li >
                     </ ul >
                     < div  class ="clear" ></ div >
                </ div >
                < div  class ="sblank2" ></ div >
                < div  class ="logos" >
                     < div  class ="logoscnt" >
                          < img  src ="images/clogo.gif"  class ="margin-right-left"  alt ="logo"   />< img  src ="images/clogo.gif"  class ="margin-right-left"  alt ="logo"   />< img  src ="images/clogo.gif"  class ="margin-right-left"  alt ="logo"   />< img  src ="images/clogo.gif"  class ="margin-right-left"  alt ="logo"   />< img  src ="images/clogo.gif"  class ="margin-right-left"  alt ="logo"   />                     
                     </ div >
                </ div >
                </ div >
                < div  class ="siteinfo" >
                  VIP会员共计 < span  class ="fcborange" > 10200 </ span > 家，今日注册 < span  class ="fcborange" > 68 </ span > 人，更新 < span  class ="fcborange" > 5365 </ span > 条信息，当前总在线 < span  class ="fcborange" > 62400 </ span > 人
                </ div >
</ div >
</ body >
</ html >
angleoldhen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
［原创］Ajax标签导航实例详解
talent_yao的专栏
07-15 790
 之前整理发表了《XMLHTTPRequest的属性和方法简介》,它ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，是我很久前就写的一个脚本，很实用的（还被很多网站收录了哦），现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含! 演示地址：http://www.yaohaixiao.com/effects/samples/ajaxta
ajax实现的动态导航条
04-02
ajax实现的动态导航条，二级联动。效果相当的美观。
Ajax标签式网页导航效果（源码）
小李专栏
02-11 2880
Ajax标签导航效果注：本文来自：蓝色理想 ，文责版权均属于原作者。本文代码最终效果演示（点击这里）function.jsfunction getObject(objectId) ...{     if(document.getElementById && document.getElementById(objectId)) ...{    // W3C DOM       ret
Ajax标签导航实例详解
blacksource的专栏
06-08 798
CSS技巧篇（position属性的运用技巧）下面开始我们的分析了，先来看看这段XHTML代码：         网站重构         CSS布局实录         海啸的地盘         Ajax高级编程                                    PRG全棉短袖衬衣最后的抢购机抢购机 2006-08-15              PRG全棉短袖
导航和ajax
weixin_30527423的博客
06-18 129
大概两三个月没做web开发了，上周开始接受了一个简单的内部网站应用，居然手生的紧，经过这几天的查资料，复习，终于进入了一点状态。 值得记下来的目前只有两点，做导航，和ajax实现页面无刷新更新。 导航做的非常简单，一个头部，一个内容页，一个尾部，头部放导航，通过CSS，把ul列表改造成下拉菜单的样子，通过Servlet完成页面跳转，通过Ajax，把跳转的页面append到...
Ajax标签导航效果(仿网易首页)
01-21
根据yaohaixiao的Ajax标签导航效果：http://www.blueidea.com/tech/web/2006/4144.asp改进。效果：http://www.lorlo.com/tab.html主要是改了JS： 代码如下:<!– function getObject(objectId) { if(document....
Ajax标签导航效果(仿网易首页
01-15
Ajax标签导航效果(仿网易首页Ajax标签导航效果(仿网易首页
雅虎、网易Ajax标签导航效果实现
06-02
### 雅虎、网易Ajax标签导航效果实现 #### 概述 本篇文章将通过一个具体实例来介绍如何使用Ajax技术实现类似雅虎、网易等网站中的标签导航效果。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个...
ajax多标签导航
01-15
在"ajax多标签导航"中，我们可以使用Ajax替换传统的页面跳转，以实现平滑的切换效果。 1. HTML结构：每个标签通常是一个链接或按钮，对应一个特定的内容区域。点击标签时，触发JavaScript事件。 2. CSS样式：用于...
Ajax标签导航实例.rar
03-09
在本实例中，“Ajax标签导航”是利用Ajax技术来实现网页中的导航功能，提高用户体验，使得用户在切换页面时无需等待整个页面刷新，只加载需要更新的部分内容。 在“Ajax标签导航”中，主要涉及以下几个核心知识点：...
AJAX仿网易导航
05-12
AJAX的常用导航
JQuery+Ajax通用分页导航（任意表）
07-15
通过ajax调用后端Servlet，(调后端的Servlet名叫testservlet 可以在wzjpage.js第27行处修改。)返回一个JSON对象，要求：jSON对象中必须有 // datarows columns pageCount这3个对象。 //数据格式必须为: List<Object[]>（数据行） String[](列标题) 总页数int //第1步：将css和js目录放进web项目下 //第2步：将test.jsp页面的静态代码复制到你的页面上，注意： //必须提供2个table，而且第1个table的id必须为wzj_data_table //第2个的id必须为wzj_page_table，两个隐藏域名称必须为pageNumber和pageCount //第3步：确认引入了JS和CSS,test.jsp页面中的代码，严禁修改元素id。否则运行报错。 //第4步：编写后端程序根据请求中传入的页码抓取数据
导航ajax来实现,AJAX 实现导航内容刷新
weixin_33340674的博客
08-05 361
实现相似于下图点击导航实现菜单内容局部刷新，能够考虑使用AJAX 来实现。javascript 在如下示例中，有 a 和 b 两个导航菜单，点击 a 则显示 a.html 的页面内容， 点击 b 则显示 b.html 内容。html首先准备三个页面，index.html , a.html , b.html。javaHTML 中给出页面结构，放置导航栏的 div 和显示菜单内容 的 div。ajax...
　Ajax标签导航实例详解
paolei的笔记
05-20 636
http://www.blueidea.com/tech/web/2008/5330.aspAjax标签导航实例详解 作者：yaohaixiao　时间： 2008-02-25　文档类型：原创　来自：蓝色理想 第 1 页 代码篇 第 2 页 CSS技巧篇 第 3 页 Java
禁用ajax导航,AJAX 导航简介
weixin_29783347的博客
08-05 228
AJAX 导航简介01/29/2010本文内容Internet Explorer 8 引入了异步 JavaScript 和 XML (AJAX) 导航。 有些最终用户在启用 AJAX 的网站中无法通过“后退”和“前进”按钮进行导航，而且无法更新浏览历史记录，这些功能可帮助减少这种情况的发生。 只需使用简单的几行脚本，即可向网站添加 AJAX 导航，从而像“传统”导航一样平稳而无缝地导航启用了 AJ...
Ajax实现点击导航栏只切换页面内容，导航栏不变
smx6666668的博客
03-28 2866
<ul class="Menu"> <li class="current" data-id="111">导航1<span></span></li> <li data-id="222">导航2<span></span></li> <li data-id="333"&g...
jquery ajax导航菜单,常用的JS后台导航菜单
weixin_39552286的博客
08-06 152
后台管理body {margin:0;text-align:center;color:#000;font:normal 12px Arial,Verdana,Tahoma;text-align:center;background:#C8D0D5;line-height:150%;}a:link,a:visited {color:#385065;text-decoration:none}a:hove...
html用ajax获取数据后分页，非常简单！pagehelper分页插件+html+springboot
weixin_46305078的博客
11-07 3316
这是第三篇分页，之前的两种分页在数据越来越多并且功能需求上已经不能够满足。 themleaf结合mybatis的pagehelper分页插件分页 纯js分页 下面是先分析一下原因，如果不想看可以直接往下看代码 themleaf结合mybatis的pagehelper分页插件分页 优点：使用非常的简单，mybatis的pagehelper分页插件都封装好了，只需要传入要查询的页码，就可以了。查询数据是每次只查询一页的内容。查询快。如果分页是不带查询功能的，推荐使用这个。 不足：但是通过themleaf的
ajax点击左侧二级导航条,右侧显示内容
renkaiyue的博客
09-21 5147
需要引入:link rel="stylesheet" href="bootstrap.css">script src="jquery-1.11.3.js">script> /*main.css*/.main-container { position: relative; } .left_list { border: 1px solid #3b3b1f; position: fixed
使用JQuery实现横向导航菜单效果中用到的知识点
最新发布
05-18
使用JQuery实现横向导航菜单效果可以用到以下知识点： 1. 选择器：JQuery的选择器可以用来选择HTML元素，比如class、id、标签名等。横向导航菜单的选项卡通常使用class选择器来选择。 2. 事件处理器：使用JQuery的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值