AJAX的选项卡效果(类似YAHOO的代码)

common.css
form,input,select {font-size:12px; margin:0px; padding:0px;}
table,td,tr,th {font-size:12px;word-wrap:break-word;word-break:break-all;}
li {list-style:none;}
p {text-indent:2em;}
/* 链接颜色 */
a {color:#000000; text-decoration:none;}
a:link {color:#00007F; text-decoration:underline}
a:visited {color:#00007F; text-decoration:underline}
a:active {color:#00007F; text-decoration:underline}
a:hover {color:#ff0000; text-decoration:none}
/* 颜色属性 [定义规则，小写c加颜色名称] */
.cRed    ,a.cRed:link    ,a.cRed:visited        { color:#F00; }
.cDRed    ,a.cDRed:link    ,a.cDRed:visited    { color:#d80000;}
.cGray    ,a.cGray:link    ,a.cGray:visited    { color: #4F544D;}
.cWhite    ,a.cWhite:link    ,a.cWhite:visited    { color: White;}
.cBlack    ,a.cBlack:link ,a.cBlack:visited    { color: Black;}
/* 字体属性 [定义规则，小写f加属性名称] */
.fB {    font-weight: bold;}
.fI {    font-style: italic;}
/* 字体大小*/
.f7px { font-size:7px;}
.f12px { font-size:12px;}
.f14px { font-size:14px;}
/* 其他属性 */
.left { float: left;}
.right { float: right;}
.clear { clear: both; font-size:12px; width:1px; visibility: hidden; }
.hidden {display: none;}
.unLine    ,.unLine a    {text-decoration: none;}
.noBorder {border:none;    }
.Border1px {border:1px;    }
/*共用表现样式*/
.list{padding:7px 10px 5px 10px; text-align:left; line-height:19px;}
.listcenter{text-align:center;}
/*新闻栏目导航颜色*/
#news-nav .main a {color:#EEF;}
#news-nav .main a:link {color:#EEF;}
#news-nav .main a:visited {color:#EEF;}
img .pic011 {border:#000 1px solid;}


function_style.css
.tab-pane-control.tab-pane {position:relative;    width:550px; margin-right:-2px;}

.tab-pane-control .tab-row .tab {width:70px;height:19px;background:url(../images/tab.gif);position:relative;top:0;display:inline;float:left;    cursor:hand; margin:1px -1px 1px 2px;padding:    2px 0px 0px 0px;border:    0;z-index:1; white-space:    nowrap;    text-align:    center;}
.tab-pane-control .tab-row .tab.selected {font-weight:bold;width:74px !important;    height:21px !important;background:    url(../images/tab.active.gif) !important;    background-repaet:    no-repeat;    border-bottom-width:    0;z-index:3;padding:3px 0 0 0;margin:    1px -3px -3px 0px; top:-3px;}
.tab-pane-control .tab-row .tab.selected a{ font-weight:bold;}
.tab-pane-control .tab-row .tab a {color:Black;font:12px "宋体";text-decoration:none;cursor:hand; line-height:19px}
.tab-pane-control .tab-row .tab.hover {width:70px;height:19px;font:12px Tahoma;background:url(../images/tab.hover.gif);background-repaet:    no-repeat; cursor:hand;}

.tab-pane-control .tab-page {clear:both;border:1px solid #919b9c;background:#fdfdff;z-index:2;position:relative;top: -2px;font:12px "sans-serif, Tahoma"; color:Black; filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffefeff,EndColorStr=#fff3f5fb, GradientType=0)progid:DXImageTransform.Microsoft.Shadow(Color=#ffb6bccb, Strength=2, Direction=135);padding:5px;height:140px;}
.tab-pane-control .tab-row {z-index:1;white-space:nowrap;}

.tab-pane-control .tab-page ul {margin:7px 0;}
.tab-pane-control .tab-page ul li{font-size:14px;padding-left:8px; list-style: url(../images/i2.gif) inside none; line-height:140%;}
.tab-pane-control .tab-page ul li a{color:#1f3a87; text-decoration:none;}
.tab-pane-control .tab-page ul li a:hover {text-decoration:underline;}
.tab-pane-control .tab-page .more{clear:both; margin:0 10px; padding:5px 0 4px; font:12px verdana; background:url(../images/rul_hori_dot.gif) top repeat-x;}
.tab-pane-control .tab-page .more a{float:right;color:#000;}

.pubtimedate {font-size:12px;color:#999;}


news_style.css
h3 {}
.tooltipdiv
{padding:3px;}

Ajax_inject.js

　  本帖相关代码   [全显模式]

//inject news headline
var responsecont;
var xmlhttpRequstObj;
var moreProvidersLinks;
var moreProvidersClass;
var moreProvidersDisplay;
var moreLocalNewsProviders;
var localNewsPageLink;
function getnews()
{
  var now=new Date();
  var num=now.getMilliseconds();
  var url = '<a href= "//news.fc510.com/v1/news/modules/news_index/category.aspx?v=' target='_blank'>http://news.fc510.com/v1/news/modules/news_index/category.aspx?v=" target="_blank"> http://news.fc510.com/v1/news/modules/news_index/category.aspx?v=</a>'+num;
  // Initialize Mozilla XMLHttpRequest object
  if (window.XMLHttpRequest)
  {
      xmlhttpRequstObj = new XMLHttpRequest();
      xmlhttpRequstObj.onreadystatechange = processRequestChange;
      xmlhttpRequstObj.open( "GET", url, true);
      xmlhttpRequstObj.send( null);
  }
  // Initialize for IE/Windows ActiveX version
  else if (window.ActiveXObject)
  {
      xmlhttpRequstObj = new ActiveXObject( "Microsoft.XMLHTTP");
      if (xmlhttpRequstObj)
      {
          xmlhttpRequstObj.onreadystatechange = processRequestChange;
          xmlhttpRequstObj.open( "GET", url, true);
          xmlhttpRequstObj.send();
      }
  }
}

function processRequestChange()
{
  // only if xmlhttpRequstObj shows "complete"
  if (xmlhttpRequstObj.readyState == 4)
  {
      // only http 200 to process
      if (xmlhttpRequstObj.status == 200)
      {
        var newsstring = xmlhttpRequstObj.responseText;
        //inject centent to tab-pane
        if (newsstring.length > 200)
        {
            shownews(newsstring);
        }
      }
  }
}

function shownews(newsstring){
//<![CDATA[
    responsecont = document.createElement('div');
    responsecont.innerHTML = newsstring;

    var mstrresponse = responsecont.innerHTML;
    var homecont = document.getElementById('tabcontainer');

    homecont.innerHTML= mstrresponse;

    //cycle through containers and fix tabs
    var homecontarr = homecont.getElementsByTagName('div');
       
        //resort tab-pane
        setupAllTabs();
//]]>
}


function makexmlo(){
    if(window.ActiveXObject){
        //IE
        var xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP");
    } else if(window.XMLHttpRequest){
        //Firefox
        var xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

/**
* Get an element by ID regardless of browser type.
*
* id value of "id" attribute of element
*/
function getElement(id) {
    var element = null;
    try {
        element = document.getElementById(id);
    }
    catch (ex) {
        element = document.all[id];
    }
    return element;
}
//-----------------------------------------------------------------------------
//Inject news preview
var pv_evt, pv_head, pv_path, req, pv_x, pv_y, pv_ok = false, pv_async = true;

function cancelPreview()
{
    try    {
        pv_ok = false;
        tt_Hide();
    }
    catch (ex) {
        //ignore ie error
    }
}

function showPreview(event, headline, path)
{
    pv_evt = event;
    pv_head = headline;
    pv_path = path;
    pv_ok  = true;

    try {
        pv_x = tt_EvX( event);
      pv_y = tt_EvY( event);
//    alert("event at " + pv_x + ", " + pv_y);
      if (!pv_async){
            tt_go(event, pv_head, req.responseText);
        } else{
            window.setTimeout('getOOTB()', 700);
        }
    }
    catch (ex) {
        // skip if ie error
    }
}

function onPreviewLoaded()
{
    if (pv_async && req.readyState == 4 && req.status == 200 && pv_ok)
    {
      tt_go(pv_evt, pv_head, req.responseText, pv_x, pv_y);
    }
}

function getOOTB(){
    if (!pv_ok)
    return true;
    path = pv_path;
    url = "<a href=" //news.fc510.com/v1/news/function/getpreview.aspx?newsid=' target='_blank'>http://news.fc510.com/v1/news/function/getpreview.aspx?newsid=" target="_blank ">http://news.fc510.com/v1/news/function/getpreview.aspx?newsid=</a>" + path;
    //Initialize for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = onPreviewLoaded;
        req.open( "GET", url, pv_async);
        req.send( null);
    } else if (window.ActiveXObject) {
        req = new ActiveXObject( "Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = onPreviewLoaded;
            req.open( "GET", url, pv_async);
            req.send();
        }
    }
}

news_index.js

　  本帖相关代码   [全显模式]

// This function is used to define if the browser supports the needed
// features
function hasSupport() {

    if (typeof hasSupport.support != "undefined")
        return hasSupport.support;
   
    var ie55 = /msie 5\.[56789]/i.test( navigator.userAgent );
   
    hasSupport.support = ( typeof document.implementation != "undefined" &&
    document.implementation.hasFeature( "html", "1.0" ) || ie55 )
           
    // DOM1 bug... Patch it!
    if ( ie55 ) {
        document._getElementsByTagName = document.getElementsByTagName;
        document.getElementsByTagName = function ( sTagName ) {
            if ( sTagName == "*" )
                return document.all;
            else
                return document._getElementsByTagName( sTagName );
        };
    }

    return hasSupport.support;
}

///////////////////////////////////////////////////////////////////////////////////
// 构建标签页
//
// el : HTMLElement    tab容器
// bUseCookie : Boolean    使用cookies维持状态
//
function _TabPane( el, bUseCookie ) {
    if ( !hasSupport() || el == null ) return;
   
    this.element = el;
    this.element.tabPane = this;
    this.pages = [];
    this.selectedIndex = null;
    this.useCookie = bUseCookie != null ? bUseCookie : true;
   
    // add class name tag to class name
    this.element.className = this.classNameTag + " " + this.element.className;
   
    // add tab row
    this.tabRow = document.createElement( "div" );
    this.tabRow.className = "tab-row";
    el.insertBefore( this.tabRow, el.firstChild );

    var tabIndex = 0;
    if ( this.useCookie ) {
        tabIndex = Number( _TabPane.getCookie( "_tab_" + this.element.id ) );
        if ( isNaN( tabIndex ) )
            tabIndex = 0;
    }
    this.selectedIndex = tabIndex;
   
    // loop through child nodes and add them
    var cs = el.childNodes;
    var n;
    for ( var i = 0; i < cs.length; i++) {
        if (cs .nodeType == 1 && cs.className == "tab-page") {
            this.addTabPage( cs );
        }
    }
}

_TabPane.prototype.classNameTag = "tab-pane-control";

_TabPane.prototype.setSelectedIndex = function ( n ) {
    if (this.selectedIndex != n) {
        if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )
            this.pages[ this.selectedIndex ].hide();
        this.selectedIndex = n;
        this.pages[ this.selectedIndex ].show();
       
        if ( this.useCookie )
            _TabPane.setCookie( "_tab_" + this.element.id, n );    // session cookie
    }
};
   
_TabPane.prototype.getSelectedIndex = function () {
    return this.selectedIndex;
};
   
_TabPane.prototype.addTabPage = function ( oElement ) {
    if ( !hasSupport() ) return;
   
    if ( oElement.tabPage == this )    // already added
        return oElement.tabPage;

    var n = this.pages.length;
    var tp = this.pages[n] = new _TabPage( oElement, this, n );
    tp.tabPane = this;
   
    // move the tab out of the box
    this.tabRow.appendChild( tp.tab );
           
    if ( n == this.selectedIndex )
        tp.show();
    else
        tp.hide();
       
    return tp;
};
   
_TabPane.prototype.dispose = function () {
    this.element.tabPane = null;
    this.element = null;       
    this.tabRow = null;
   
    for (var i = 0; i < this.pages.length; i++) {
        this.pages.dispose();
        this.pages = null;
    }
    this.pages = null;
};
// Cookie handling
_TabPane.setCookie = function ( sName, sValue, nDays ) {
    var expires = "";
    if ( nDays ) {
        var d = new Date();
        d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 );
        expires = "; expires=" + d.toGMTString();
    }

    document.cookie = sName + "=" + sValue + expires + "; path=/";
};

_TabPane.getCookie = function (sName) {
    var re = new RegExp( "(\;|^)[^;]*(" + sName + ")\=([^;]*)(;|$)" );
    var res = re.exec( document.cookie );
    return res != null ? res[3] : null;
};

_TabPane.removeCookie = function ( name ) {
    setCookie( name, "", -1 );
};
// Use _TabPage.addTabPage instead
// el : HTMLElement   
// tabPane : _TabPane    parent tab is null
// nindex :    Number    The index of pane page array
//
function _TabPage( el, tabPane, nIndex ) {
    if ( !hasSupport() || el == null ) return;
   
    this.element = el;
    this.element.tabPage = this;
    this.index = nIndex;
   
    var cs = el.childNodes;
    for (var i = 0; i < cs.length; i++) {
        if (cs.nodeType == 1 && cs.className == "tab") {
            this.tab = cs;
            break;
        }
    }
   
    // insert a tag around content to support keyboard navigation
    var a = document.createElement( "A" );
    this.aElement = a;
    a.href = "#";
    a.onclick = function () { return false; };
    while ( this.tab.hasChildNodes() )
        a.appendChild( this.tab.firstChild );
    this.tab.appendChild( a );
   
    // hook up events, using DOM0
    var oThis = this;
    this.tab.onclick = function () { oThis.select(); };
    this.tab.onmouseover = function () { _TabPage.tabOver( oThis ); };
    this.tab.onmouseout = function () { _TabPage.tabOut( oThis ); };
}

_TabPage.prototype.show = function () {
    var el = this.tab;
    var s = el.className + " selected";
    s = s.replace(/ +/g, " ");
    el.className = s;
   
    this.element.style.display = "block";
};

_TabPage.prototype.hide = function () {
    var el = this.tab;
    var s = el.className;
    s = s.replace(/ selected/g, "");
    el.className = s;

    this.element.style.display = "none";
};
   
_TabPage.prototype.select = function () {
    this.tabPane.setSelectedIndex( this.index );
};
   
_TabPage.prototype.dispose = function () {
    this.aElement.onclick = null;
    this.aElement = null;
    this.element.tabPage = null;
    this.tab.onclick = null;
    this.tab.onmouseover = null;
    this.tab.onmouseout = null;
    this.tab = null;
    this.tabPane = null;
    this.element = null;
};

_TabPage.tabOver = function ( tabpage ) {
    var el = tabpage.tab;
    var s = el.className + " hover";
    s = s.replace(/ +/g, " ");
    el.className = s;
};

_TabPage.tabOut = function ( tabpage ) {
    var el = tabpage.tab;
    var s = el.className;
    s = s.replace(/ hover/g, "");
    el.className = s;
};


// This function initializes all uninitialized tab panes and tab pages
function setupAllTabs() {
    if ( !hasSupport() ) return;

    var all = document.getElementsByTagName( "*" );
    var l = all.length;
    var tabPaneRe = /tab\-pane/;
    var tabPageRe = /tab\-page/;
    var cn, el;
    var parentTabPane;
   
    for ( var i = 0; i < l; i++ ) {
        el = all
        cn = el.className;

        // no className
        if ( cn == "" ) continue;
       
        // uninitiated tab pane
        if ( tabPaneRe.test( cn ) && !el.tabPane )
            new _TabPane( el );
   
        // unitiated tab page wit a valid tab pane parent
        else if ( tabPageRe.test( cn ) && !el.tabPage &&
                    tabPaneRe.test( el.parentNode.className ) ) {
            el.parentNode.tabPane.addTabPage( el );           
        }
    }
}

function disposeAllTabs() {
    if ( !hasSupport() ) return;
   
    var all = document.getElementsByTagName( "*" );
    var l = all.length;
    var tabPaneRe = /tab\-pane/;
    var cn, el;
    var tabPanes = [];
   
    for ( var i = 0; i < l; i++ ) {
        el = all
        cn = el.className;

        // no className
        if ( cn == "" ) continue;
       
        // tab pane
        if ( tabPaneRe.test( cn ) && el.tabPane )
            tabPanes[tabPanes.length] = el.tabPane;
    }
   
    for (var i = tabPanes.length - 1; i >= 0; i--) {
        tabPanes.dispose();
        tabPanes = null;
    }
}
// initialization hook up
// DOM2
if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", setupAllTabs, false );

// IE
else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", setupAllTabs );
    window.attachEvent( "onunload", disposeAllTabs );
}

else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            setupAllTabs();
        };
    }
    else
        window.onload = setupAllTabs;
}

tooltip.js

　  本帖相关代码   [全显模式]

////////////////  GLOBAL TOOPTIP CONFIGURATION  /////////////////////
var ttBgColor      = "#F2F3F5";
var ttBgImg        = "";          // path to background image;
var ttBorderColor  = "#A5B2BD";
var ttBorderWidth  = 1;
var ttDelay        = 500;          // time span until tooltip shows up [milliseconds]
var ttFontColor    = "#333333";
var ttFontFace    = "arial,helvetica,sans-serif";
var ttFontSize    = "12px";
var ttFontWeight  = "normal";    // alternative is "bold";
var ttOffsetX      = 12;            // horizontal offset of left-top corner from mousepointer
var ttOffsetY      = 15;          // vertical offset                  "
var ttPadding      = 3;            // spacing between border and content
var ttShadowColor  = " ";
var ttShadowWidth  = 0;
var ttTemp        = 0;            // time span after which the tooltip disappears; 0 (zero) means "infinite timespan"
var ttTextAlign    = "left ";
var ttTitleColor  = "#ffffff ";    // color of caption text
var ttWidth        = 300;
////////////////////  END OF TOOLTIP CONFIG  ////////////////////////



//////////////  TAGS WITH TOOLTIP FUNCTIONALITY  ////////////////////
// List may be extended or shortened:
var tt_tags = new Array("a ","area ","b ","big ","caption ","center ","code ","dd ","div ","dl ","dt ","em ","h1 ","h2 ","h3 ","h4 ","h5 ","h6 ","i ","img ","input ","li ","map ","ol ","p ","pre ","s ","small ","span ","strike ","strong ","sub ","sup ","table ","td ","th ","tr ","tt ","u ","var ","ul ","layer ");
/////////////////////////////////////////////////////////////////////



///////// DON'T CHANGE ANYTHING BELOW THIS LINE /////////////////////
var tt_obj,                // current tooltip
tt_objW = 0, tt_objH = 0,  // width and height of tt_obj
tt_objX = 0, tt_objY = 0,
tt_offX = 0, tt_offY = 0,
xlim = 0, ylim = 0,        // right and bottom borders of visible client area
tt_sup = false,            // true if T_ABOVE cmd
tt_sticky = false,        // tt_obj sticky?
tt_wait = false,
tt_vis = false,            // tooltip visibility flag
tt_sub = false,            // true while tooltip below mousepointer
tt_u = "undefined ",
tt_inputs = new Array(),  // drop-down-boxes to be hidden in IE
// Opera: disable href when hovering <a>
tt_tag = null;            // stores hovered dom node, href and previous statusbar txt


var tt_db = (document.compatMode && document.compatMode != "BackCompat ")? document.documentElement : document.body? document.body : null,
tt_n = navigator.userAgent.toLowerCase();

// Browser flags
var tt_op = !!(window.opera && document.getElementById),
tt_op6 = tt_op && !document.defaultView,
tt_op7 = tt_op && !tt_op6,
tt_ie = tt_n.indexOf("msie ") != -1 && document.all && tt_db && !tt_op,
tt_n4 = (document.layers && typeof document.classes != tt_u),
tt_n6 = (!tt_op && document.defaultView && typeof document.defaultView.getComputedStyle != tt_u),
tt_w3c = !tt_ie && !tt_n6 && !tt_op && document.getElementById;

tt_n = " ";


function tt_Int(t_x)
{
    var t_y;
    return isNaN(t_y = parseInt(t_x))? 0 : t_y;
}

function wzReplace(t_x, t_y)
{
    var t_ret = " ",
    t_str = this,
    t_xI;
    while((t_xI = t_str.indexOf(t_x)) != -1)
    {
        t_ret += t_str.substring(0, t_xI) + t_y;
        t_str = t_str.substring(t_xI + t_x.length);
    }
    return t_ret+t_str;
}
String.prototype.wzReplace = wzReplace;

function tt_N4Tags(tagtyp, t_d, t_y)
{
    t_d = t_d || document;
    t_y = t_y || new Array();
    var t_x = (tagtyp=="a ")? t_d.links : t_d.layers;
    for(var z = t_x.length; z--;) t_y[t_y.length] = t_x[z];
    for(var z = t_d.layers.length; z--;) t_y = tt_N4Tags(tagtyp, t_d.layers[z].document, t_y);
    return t_y;
}

function tt_GetSelects()
{
    if (!tt_op6 && !tt_ie) return;
    var t_s = tt_op6? "input " : "select ";
    if (document.all)
    {
        var t_i = document.all.tags(t_s).length; while(t_i--)
            tt_inputs[t_i] = document.all.tags(t_s)[t_i];
    }
    else if (document.getElementsByTagName)
    {
        var t_i = document.getElementsByTagName(t_s).length; while(t_i--)
            tt_inputs[t_i] = document.getElementsByTagName(t_s)[t_i];
    }
    var t_i = tt_inputs.length; while(t_i--)
    {
        tt_inputs[t_i].x = 0;
        tt_inputs[t_i].y = 0;
        var t_o = tt_inputs[t_i];
        while(t_o)
        {
            tt_inputs[t_i].x += t_o.offsetLeft || 0;
            tt_inputs[t_i].y += t_o.offsetTop|| 0;
            t_o = t_o.offsetParent;
        }
    }
}

function tt_Htm(tt, t_id, txt)
{
    var t_bgc = (typeof tt.T_BGCOLOR != tt_u)? tt.T_BGCOLOR : ttBgColor,
    t_bgimg  = (typeof tt.T_BGIMG != tt_u)? tt.T_BGIMG : ttBgImg,
    t_bc      = (typeof tt.T_BORDERCOLOR != tt_u)? tt.T_BORDERCOLOR : ttBorderColor,
    t_bw      = (typeof tt.T_BORDERWIDTH != tt_u)? tt.T_BORDERWIDTH : ttBorderWidth,
    t_ff      = (typeof tt.T_FONTFACE != tt_u)? tt.T_FONTFACE : ttFontFace,
    t_fc      = (typeof tt.T_FONTCOLOR != tt_u)? tt.T_FONTCOLOR : ttFontColor,
    t_fsz    = (typeof tt.T_FONTSIZE != tt_u)? tt.T_FONTSIZE : ttFontSize,
    t_fwght  = (typeof tt.T_FONTWEIGHT != tt_u)? tt.T_FONTWEIGHT : ttFontWeight,
    t_padd    = (typeof tt.T_PADDING != tt_u)? tt.T_PADDING : ttPadding,
    t_shc    = (typeof tt.T_SHADOWCOLOR != tt_u)? tt.T_SHADOWCOLOR : (ttShadowColor || 0),
    t_shw    = (typeof tt.T_SHADOWWIDTH != tt_u)? tt.T_SHADOWWIDTH : (ttShadowWidth || 0),
    t_algn    = (typeof tt.T_TEXTALIGN != tt_u)? tt.T_TEXTALIGN : ttTextAlign,
    t_tit    = (typeof tt.T_TITLE != tt_u)? tt.T_TITLE : " ",
    t_titc    = (typeof tt.T_TITLECOLOR != tt_u)? tt.T_TITLECOLOR : ttTitleColor,
    t_w      = (typeof tt.T_WIDTH != tt_u)? tt.T_WIDTH  : ttWidth;
    if (t_shc || t_shw)
    {
        t_shc = t_shc || "#cccccc ";
        t_shw = t_shw || 5;
    }
    if (tt_n4 && (t_fsz == "10px " || t_fsz == "11px ")) t_fsz = "12px ";


    var t_y = '<div id="'+t_id+' " style="position:absolute;z-index:1010;';
    t_y += 'left:0px;top:0px;width:'+(t_w+t_shw)+'px;visibility:'+(tt_n4? 'hide' : 'hidden')+'; ">' +
        '<table border="0 " cellpadding="0 " cellspacing="0 "'+(t_bc? (' bgcolor="'+t_bc+' "') : '')+' width="'+t_w+' ">';
    if (t_tit)
    {
        t_y += '<tr><td style="padding-left:3px;padding-right:3px; " align="'+t_algn+' "><font color="'+t_titc+' " face="'+t_ff+' " ' +
            'style="color:'+t_titc+';font-family:'+t_ff+';font-size:'+t_fsz+'; "><b>' +
            (tt_n4? ' ' : '')+t_tit+'<\/b><\/font><\/td><\/tr>';
    }
    t_y += '<tr><td><table border="0 " cellpadding="'+t_padd+' " cellspacing="'+t_bw+' " width="100% ">' +
        '<tr><td'+(t_bgc? (' bgcolor="'+t_bgc+' "') : '')+(t_bgimg? ' background="'+t_bgimg+' "' : '');
    if (tt_n6) t_y += ' style="padding:'+t_padd+'px; "';
    t_y += ' align="'+t_algn+' "><font color="'+t_fc+' " face="'+t_ff+' "' +
        ' style="color:'+t_fc+';font-family:'+t_ff+';font-size:'+t_fsz+';font-weight:'+t_fwght+'; ">';
    if (t_fwght == 'bold') t_y += '<b>';
    t_y += txt;
    if (t_fwght == 'bold') t_y += '<\/b>';
    t_y += '<\/font><\/td><\/tr><\/table><\/td><\/tr><\/table>';
    if (t_shw)
    {
        var t_spct = Math.round(t_shw*1.3);
        if (tt_n4)
        {
            t_y += '<layer bgcolor="'+t_shc+' " left="'+t_w+' " top="'+t_spct+' " width="'+t_shw+' " height="0 "><\/layer>' +
                '<layer bgcolor="'+t_shc+' " left="'+t_spct+' " align="bottom " width="'+(t_w-t_spct)+' " height="'+t_shw+' "><\/layer>';
        }
        else
        {
            var t_opa = tt_n6? '-moz-opacity:0.85;' : tt_ie? 'filter:Alpha(opacity=85);' : '';
            t_y += '<div id="'+t_id+'R " style="position:absolute;background:'+t_shc+';left:'+t_w+'px;top:'+t_spct+'px;width:'+t_shw+'px;height:1px;overflow:hidden;'+t_opa+' "><\/div>' +
                '<div style="position:relative;background:'+t_shc+';left:'+t_spct+'px;top:0px;width:'+(t_w-t_spct)+'px;height:'+t_shw+'px;overflow:hidden;'+t_opa+' "><\/div>';
        }
    }
    t_y += '<\/div>';
    return t_y;
}


function tt_Init()
{
    if (!(tt_op || tt_n4 || tt_n6 || tt_ie || tt_w3c)) return;

    var htm = tt_n4? '<div style="position:absolute; "><\/div>' : '', tags, t_tj, over, esc = 'return escape(';
    var i = tt_tags.length; while(i--)
    {
        tags = tt_ie? (document.all.tags(tt_tags) || 1)
            : document.getElementsByTagName? (document.getElementsByTagName(tt_tags) || 1)
            : (!tt_n4 && tt_tags==" a")? document.links
            : 1;
        if (tt_n4 && (tt_tags == "a" || tt_tags == "layer")) tags = tt_N4Tags(tt_tags);
        var j = tags.length; while(j--)
        {
            if (typeof (t_tj = tags[j]).onmouseover == "function" && t_tj.onmouseover.toString().indexOf(esc) != -1 && !tt_n6 || tt_n6 && (over = t_tj.getAttribute("onmouseover")) && over.indexOf(esc) != -1)
            {
                if (over) t_tj.onmouseover = new Function(over);
                var txt = unescape(t_tj.onmouseover());
                htm += tt_Htm(t_tj,    "tOoLtIp"+i+""+j,    txt.wzReplace("& ","&"));
                t_tj.onmouseover = new Function('e',
                    'tt_Show(e,'+
                    '"tOoLtIp' +i+''+j+ '",'+
                    (typeof t_tj.T_ABOVE != tt_u)+','+
                    ((typeof t_tj.T_DELAY != tt_u)? t_tj.T_DELAY : ttDelay)+','+
                    ((typeof t_tj.T_FIX != tt_u)? '"'+t_tj.T_FIX+'"' : '""')+','+
                    (typeof t_tj.T_LEFT != tt_u)+','+
                    ((typeof t_tj.T_OFFSETX != tt_u)? t_tj.T_OFFSETX : ttOffsetX)+','+
                    ((typeof t_tj.T_OFFSETY != tt_u)? t_tj.T_OFFSETY : ttOffsetY)+','+
                    (typeof t_tj.T_STATIC != tt_u)+','+
                    (typeof t_tj.T_STICKY != tt_u)+','+
                    ((typeof t_tj.T_TEMP != tt_u)? t_tj.T_TEMP : ttTemp)+
                    ');'
                );
                t_tj.onmouseout = tt_Hide;
                if (t_tj.alt) t_tj.alt = "";
                if (t_tj.title) t_tj.title = "";
            }
        }
    }
    document.write(htm);
}

function tt_EvX(t_e)
{
    var t_y = tt_Int(t_e.pageX || t_e.clientX || 0) +
        tt_Int(tt_ie? tt_db.scrollLeft : 0) +
        tt_offX;
    if (t_y > xlim) t_y = xlim;
    var t_scr = tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0);
    if (t_y < t_scr) t_y = t_scr;

    return t_y;
}

function tt_EvY(t_e)
{
    var t_y = tt_Int(t_e.pageY || t_e.clientY || 0) +
        tt_Int(tt_ie? tt_db.scrollTop : 0);
    if (tt_sup) t_y -= (tt_objH + tt_offY - 15);
    else if (t_y > ylim || !tt_sub && t_y > ylim-24)
    {
        t_y -= (tt_objH + 5);
        tt_sub = false;
    }
    else
    {
        t_y += tt_offY;
        tt_sub = true;
    }
    return t_y;
}

function tt_ReleasMov()
{
    if (document.onmousemove == tt_Move)
    {
        if (document.releaseEvents) document.releaseEvents(Event.MOUSEMOVE);
        document.onmousemove = null;
    }
}

function tt_HideInput()
{
    if (!(tt_ie || tt_op6) || !tt_inputs) return;
    var t_o;
    var t_i = tt_inputs.length; while(t_i--)
    {
        t_o = tt_inputs[t_i];
        if (tt_vis && tt_objX+tt_objW > t_o.x && tt_objX < t_o.x+t_o.offsetWidth && tt_objY+tt_objH > t_o.y && tt_objY < t_o.y+t_o.offsetHeight)
            t_o.style.visibility = 'hidden';
        else t_o.style.visibility = 'visible';
    }
}

function tt_GetDiv(t_id)
{
    return(
        tt_n4? (document.layers[t_id] || null)
        : tt_ie? (document.all[t_id] || null)
        : (document.getElementById(t_id) || null)
    );
}

function tt_GetDivW()
{
    return tt_Int(
        tt_n4? tt_obj.clip.width
        : tt_obj.style.pixelWidth? tt_obj.style.pixelWidth
        : tt_obj.offsetWidth
    );
}

function tt_GetDivH()
{
    return tt_Int(
        tt_n4? tt_obj.clip.height
        : tt_obj.style.pixelHeight? tt_obj.style.pixelHeight
        : tt_obj.offsetHeight
    );
}

// Compat with DragDrop Lib: Ensure that z-index of tooltip is lifted beyond toplevel dragdrop element
function tt_SetDivZ()
{
    var t_i = tt_obj.style || tt_obj;
    if (window.dd && dd.z)
        t_i.zIndex = Math.max(dd.z+1, t_i.zIndex);
}

function tt_SetDivPos(t_x, t_y)
{
    var t_i = tt_obj.style || tt_obj;
    var t_px = (tt_op6 || tt_n4)? '' : 'px';
    t_i.left = (tt_objX = t_x) + t_px;
    t_i.top = (tt_objY = t_y) + t_px;
    tt_HideInput();
}

function tt_ShowDiv(t_x)
{
    if (tt_n4) tt_obj.visibility = t_x? 'show' : 'hide';
    else tt_obj.style.visibility = t_x? 'visible' : 'hidden';
    tt_vis = t_x;
    tt_HideInput();
}

function tt_OpDeHref(t_e)
{
    if (t_e && t_e.target.hasAttribute("href"))
    {
        tt_tag = t_e.target;
        tt_tag.t_href = tt_tag.getAttribute("href");
        tt_tag.removeAttribute("href");
        tt_tag.style.cursor = "hand";
        tt_tag.onmousedown = tt_OpReHref;
        tt_tag.stats = window.status;
        window.status = tt_tag.t_href;
    }
}

function tt_OpReHref()
{
    if (tt_tag)
    {
        tt_tag.setAttribute("href", tt_tag.t_href);
        window.status = tt_tag.stats;
        tt_tag = null;
    }
}

function tt_Show(t_e, t_id, t_sup, t_delay, t_fix, t_left, t_offx, t_offy, t_static, t_sticky, t_temp)
{
    if (tt_obj) tt_Hide();
    var t_mf = document.onmousemove || null;
    if (window.dd && (window.DRAG && t_mf == DRAG || window.RESIZE && t_mf == RESIZE)) return;
    var t_uf = document.onmouseup || null;
    if (t_mf && t_uf) t_uf(t_e);

    tt_obj = tt_GetDiv(t_id);
    if (tt_obj)
    {
        t_e = t_e || window.event;
        tt_sub = !(tt_sup = t_sup);
        tt_sticky = t_sticky;
        tt_objW = tt_GetDivW();
        tt_objH = tt_GetDivH();
        tt_offX = t_left? -(tt_objW+t_offx) : t_offx;
        tt_offY = t_offy;
        if (tt_op7) tt_OpDeHref(t_e);
        if (tt_n4)
        {
            if (tt_obj.document.layers.length)
            {
                var t_sh = tt_obj.document.layers[0];
                t_sh.clip.height = tt_objH - Math.round(t_sh.clip.width*1.3);
            }
        }
        else
        {
            var t_sh = tt_GetDiv(t_id+'R');
            if (t_sh)
            {
                var t_h = tt_objH - tt_Int(t_sh.style.pixelTop || t_sh.style.top || 0);
                if (typeof t_sh.style.pixelHeight != tt_u) t_sh.style.pixelHeight = t_h;
                else t_sh.style.height = t_h+'px';
            }
        }

        tt_GetSelects();

        xlim = tt_Int((tt_db && tt_db.clientWidth)? tt_db.clientWidth : window.innerWidth) +
            tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0) -
            tt_objW -
            (tt_n4? 21 : 0);
        ylim = tt_Int(window.innerHeight || tt_db.clientHeight) +
            tt_Int(window.pageYOffset || (tt_db? tt_db.scrollTop : 0) || 0) -
            tt_objH - tt_offY;

        tt_SetDivZ();
        if (t_fix) tt_SetDivPos(tt_Int((t_fix = t_fix.split(','))[0]), tt_Int(t_fix[1]));
        else tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));

        var t_txt = 'tt_ShowDiv(\'true\');';
        if (t_sticky) t_txt += '{'+
                'tt_ReleasMov();'+
                'window.tt_upFunc = document.onmouseup || null;'+
                'if (document.captureEvents) document.captureEvents(Event.MOUSEUP);'+
                'document.onmouseup = new Function("window.setTimeout(\'tt_Hide();\', 10);");'+
            '}';
        else if (t_static) t_txt += 'tt_ReleasMov();';
        if (t_temp > 0) t_txt += 'window.tt_rtm = window.setTimeout(\'tt_sticky = false; tt_Hide();\','+t_temp+');';
        window.tt_rdl = window.setTimeout(t_txt, t_delay);

        if (!t_fix)
        {
            if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
            document.onmousemove = tt_Move;
        }
    }
}

var tt_area = false;
function tt_Move(t_ev)
{
    if (!tt_obj) return;
    if (tt_n6 || tt_w3c)
    {
        if (tt_wait) return;
        tt_wait = true;
        setTimeout('tt_wait = false;', 5);
    }
    var t_e = t_ev || window.event;
    tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
    if (tt_op6)
    {
        if (tt_area && t_e.target.tagName != 'AREA') tt_Hide();
        else if (t_e.target.tagName == 'AREA') tt_area = true;
    }
}

function tt_Hide()
{
    if (window.tt_obj)
    {
        if (window.tt_rdl) window.clearTimeout(tt_rdl);
        if (!tt_sticky || !tt_vis)
        {
            if (window.tt_rtm) window.clearTimeout(tt_rtm);
            tt_ShowDiv(false);
            tt_SetDivPos(-tt_objW, -tt_objH);
            tt_obj = null;
            if (typeof window.tt_upFunc != tt_u) document.onmouseup = window.tt_upFunc;
        }
        tt_sticky = false;
        if (tt_op6 && tt_area) tt_area = false;
        tt_ReleasMov();
        if (tt_op7) tt_OpReHref();
        tt_HideInput();
    }
}

function tt_go(t_e, tdiv, txt, t_x, t_y)
{
    if (!(tt_op || tt_n4 || tt_n6 || tt_ie || tt_w3c)) return;

    var htm = tt_n4? '<div style="position:absolute;"><\/div>' : '',
    t_tj;

    var id =  Math.random();
    t_tj = tt_GetDiv(tdiv);   

    htm += tt_Htm(t_tj,    "tOoLtIp"+id,    txt.wzReplace("& ","&"));

    ttDiv = tt_GetDiv('tooltipdiv');
    ttDiv.innerHTML = htm;

    tt_Show(t_e, "tOoLtIp"+id,
    (typeof t_tj.T_ABOVE != tt_u),
//    ((typeof t_tj.T_DELAY != tt_u)? t_tj.T_DELAY : ttDelay),
    0,
    t_x + "," + t_y,
//    ((typeof t_tj.T_FIX != tt_u) ? t_tj.T_FIX : ''),
    (typeof t_tj.T_LEFT != tt_u),
    ((typeof t_tj.T_OFFSETX != tt_u)? t_tj.T_OFFSETX : ttOffsetX),
    ((typeof t_tj.T_OFFSETY != tt_u)? t_tj.T_OFFSETY : ttOffsetY),
//    (typeof t_tj.T_STATIC != tt_u),
    true,
    (typeof t_tj.T_STICKY != tt_u),
    ((typeof t_tj.T_TEMP != tt_u)? t_tj.T_TEMP : ttTemp));
}



//tt_Init();

sample.htm

　  本帖相关代码   [全显模式]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href=" http://www.w3.org/TR/html4/loose.dtd" target="_blank"> http://www.w3.org/TR/html4/loose.dtd</a>">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>标签页分类新闻范例_请大家处理模版时仔细研究</title>
<link type="text/css" rel="stylesheet" href="css/common.css" />
<link type="text/css" rel="stylesheet" href="css/news_style.css" />
<link type="text/css" rel="stylesheet" href="css/function_style.css" />

<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="js/news_index.js"></script>
<script typr="text/javascript" src="js/ajax_inject.js"></script>

</head>
<body>
<h3>最新资讯</h3>
<div id="tabcontainer">
    <div class="tab-pane" id="top">
        <div class="tab-page">
            <h2 class="tab">全 部</h2>
            <div id="top-all">
                <ul>
                    <li><a href="#">希拉克宣布将以新法取代备受争议的雇佣法</a> <span class=pubtimedate> - 2006年3月22日 15时23分</span></li>
                    <li><a href="#">布什专机反导机密曝光 新冷战阴影笼罩俄美关系</a> <span class=pubtimedate> - 2006年3月22日 15时23分</span></li>
                    <li><a href="#">花花公子创办人80岁生日举行睡衣派对(图)</a> <span class=pubtimedate> - 2006年3月22日 15时23分</span></li>
                    <li><a href="#">商人自称发现9千亿美元油田 勘探专家人间蒸发</a> <span class=pubtimedate> - 2006年3月22日 15时23分</span></li>
                    <li><a href="#">甘肃遭遇今年范围最大时间最长沙尘天气(图)</a> <span class=pubtimedate> - 2006年3月22日 15时23分</span></li>
                    <li><a href="#">中国民航开辟新航路一年节省3千万美元燃油费</a> <span class=pubtimedate> - 2006年3月22日 15时23分</span></li>
                    <li><a href="#">中国民航开辟新航路一年节省3千万美元燃油费</a> <span class=pubtimedate> - 2006年3月22日 15时23分</span></li>
                </ul>
                <div class="more"><a href="" class="action">&raquo; 全部资讯中心新闻</a></div>
            </div>
        </div>
        <div class="tab-page">
            <h2 class="tab">房产焦点</h2>
            <div id="top-jd">
                <ul>
                    <li>正在加载数据......</li>
                </ul>
                <div class="more"><a href="" class="action">&raquo; 全部房产焦点资讯</a></div>
            </div>
        </div>
        <div class="tab-page">
            <h2 class="tab">地产风云</h2>
            <div id="top-fy">
                <ul>
                    <li>正在加载数据......</li>
                </ul>
                <div class="more"><a href="" class="action">&raquo; 全部房产焦点资讯</a></div>
            </div>
        </div>
        <div class="tab-page">
            <h2 class="tab">楼市动态</h2>
            <div id="top-dt">
                <ul>
                    <li>正在加载数据......</li>
                </ul>
                <div class="more"><a href="" class="action">&raquo; 全部房产焦点资讯</a></div>
            </div>
        </div>
        <div class="tab-page">
            <h2 class="tab">地产名人</h2>
            <div name="container" id="top-mr">
                <ul>
                    <li>正在加载数据......</li>
                </ul>
                <div class="more"><a href="" class="action">&raquo; 全部房产焦点资讯</a></div>
            </div>
        </div>
        <div class="tab-page">
            <h2 class="tab">八卦楼市</h2>
            <div name="container" id="top-bg">
                <ul>
                    <li>正在加载数据......</li>
                </ul>
                <div class="more"><a href="" class="action">&raquo; 全部房产焦点资讯</a></div>
            </div>
        </div>
        <div class="tab-page">
            <h2 class="tab">每日映像</h2>
            <div name="container" id="top-yx">
                <ul>
                    <li>正在加载数据......</li>
                </ul>
                <div class="more"><a href="" class="action">&raquo; 全部房产焦点资讯</a></div>
            </div>
        </div>
    </div>
</div>
<h3>地区新闻</h3>
<div class="tab-pane" id="tabPane4">
    <div class="tab-page">
        <h2 class="tab">武汉</h2>
        <ul>
            <li>希拉克宣布将以新法取代备受争议的雇佣法</li>
            <li>布什专机反导机密曝光 新冷战阴影笼罩俄美关系</li>
            <li>花花公子创办人80岁生日举行睡衣派对(图)</li>
            <li>商人自称发现9千亿美元油田 勘探专家人间蒸发</li>
            <li>甘肃遭遇今年范围最大时间最长沙尘天气(图)</li>
            <li>中国民航开辟新航路一年节省3千万美元燃油费</li>
        </ul>
    </div>
    <div class="tab-page">
        <h2 class="tab">成都</h2>
        <ul>
            <li>希拉克宣布将以新法取代备受争议的雇佣法</li>
            <li>布什专机反导机密曝光 新冷战阴影笼罩俄美关系</li>
            <li>花花公子创办人80岁生日举行睡衣派对(图)</li>
            <li>商人自称发现9千亿美元油田 勘探专家人间蒸发</li>
            <li>甘肃遭遇今年范围最大时间最长沙尘天气(图)</li>
            <li>中国民航开辟新航路一年节省3千万美元燃油费</li>
        </ul>
    </div>
    <div class="tab-page">
        <h2 class="tab">上海</h2>
        <ul>
            <li>希拉克宣布将以新法取代备受争议的雇佣法</li>
            <li>布什专机反导机密曝光 新冷战阴影笼罩俄美关系</li>
            <li>花花公子创办人80岁生日举行睡衣派对(图)</li>
            <li>商人自称发现9千亿美元油田 勘探专家人间蒸发</li>
            <li>甘肃遭遇今年范围最大时间最长沙尘天气(图)</li>
            <li>中国民航开辟新航路一年节省3千万美元燃油费</li>
        </ul>
    </div>
    <div class="tab-page">
        <h2 class="tab">北京</h2>
        <ul>
            <li>希拉克宣布将以新法取代备受争议的雇佣法</li>
            <li>布什专机反导机密曝光 新冷战阴影笼罩俄美关系</li>
            <li>花花公子创办人80岁生日举行睡衣派对(图)</li>
            <li>商人自称发现9千亿美元油田 勘探专家人间蒸发</li>
            <li>甘肃遭遇今年范围最大时间最长沙尘天气(图)</li>
            <li>中国民航开辟新航路一年节省3千万美元燃油费</li>
        </ul>
    </div>
</div>
<div id="tooltipdiv"></div>
<script>getnews();</script>
</body>
</html>