http://zixun.hunantv.com/求如图模块的功能代码

解决方案 »

  1.   

    就是tab标签页,LZ可以把代码直接扣下来
    或者google、baidu下,例子很多
      

  2.   


     <style>
     .close {
    background:orange;
    color:white;
     }
     .open {
    background:white;
    color:black;
     }
     </style>
      <TABLE id="intro" border="1">
      <TR>
    <TD>收视指南</TD>
    <TD class="close" onclick="show(this)">周日</TD>
    <TD class="close" onclick="show(this)">周一</TD>
    <TD class="close" onclick="show(this)">周二</TD>
    <TD class="close" onclick="show(this)">周三</TD>
    <TD class="close" onclick="show(this)">周四</TD>
    <TD class="close" onclick="show(this)">周五</TD>
    <TD class="close" onclick="show(this)">周六</TD>
      </TR>
      <TR height="100px">
    <TD colspan="8" style="display:none">周日节目单</TD>
    <TD colspan="8" style="display:none">周一节目单</TD>
    <TD colspan="8" style="display:none">周二节目单</TD>
    <TD colspan="8" style="display:none">周三节目单</TD>
    <TD colspan="8" style="display:none">周四节目单</TD>
    <TD colspan="8" style="display:none">周五节目单</TD>
    <TD colspan="8" style="display:none">周六节目单</TD>
      </TR>
      </TABLE>  <SCRIPT LANGUAGE="JavaScript">
      <!--
    var lastOpenIndex;
    var date = new Date();
    var day = date.getDay(); //取当前是星期几
    var tab = document.getElementById("intro");
    tab.rows[0].cells[day+1].className = "open"; //改变相应标签的样式
    tab.rows[1].cells[day].style.display = "";  //显示相应的内容
    lastOpenIndex = day;
      //点标签触发的函数
    function show(td){
    tab.rows[0].cells[lastOpenIndex+1].className = "close";
    tab.rows[1].cells[lastOpenIndex].style.display = "none";
    td.className = "open";
    tab.rows[1].cells[td.cellIndex-1].style.display = "";
    lastOpenIndex = td.cellIndex-1;
    }
      //-->
      </SCRIPT>
      

  3.   

    <!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>
    <style type="text/css">HTML {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
    }
    BODY {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
    }
    DIV {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
    }
    SPAN {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
    }
    H2 {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
    }
    A {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
    }
    UL {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
    }
    LI {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: baseline; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; outline: 0
    }
    .col_2a_1 {
    FLOAT: left; OVERFLOW: hidden; WIDTH: 400px
    }#program_menu .tab {
    BACKGROUND: url(http://zixun.hunantv.com/source/images/zixun/bg.gif) no-repeat 0px -250px; OVERFLOW: hidden; HEIGHT: 25px
    }
    #program_menu .tab H2.title {
    FONT-SIZE: 14px; FLOAT: left; WIDTH: 84px; COLOR: #4a1e1e; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center
    }
    #program_menu .tab H2.title A {
    COLOR: #4a1e1e; TEXT-DECORATION: none
    }
    #program_menu .tab H2.title A:hover {
    TEXT-DECORATION: underline
    }
    #program_menu .tab UL {
    FLOAT: left
    }
    #program_menu .tab UL LI {
    FONT-SIZE: 12px; FLOAT: left; OVERFLOW: hidden; WIDTH: 39px; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center
    }
    #program_menu .tab UL LI A {
    DISPLAY: block; BACKGROUND: url(http://zixun.hunantv.com/source/images/zixun/bg.gif) no-repeat left -290px; WIDTH: 39px; CURSOR: pointer; COLOR: #ffffff; HEIGHT: 25px; TEXT-DECORATION: none
    }
    #program_menu .tab UL LI A:hover {
    COLOR: #333333
    }
    #program_menu .tab UL LI A.current {
    BACKGROUND: url(http://zixun.hunantv.com/source/images/zixun/bg.gif) no-repeat -39px -290px; COLOR: #333333
    }
    #program_menu .b {
    BORDER-RIGHT: #cccccc 1px solid; BACKGROUND: #f6f6f6; OVERFLOW: hidden; BORDER-LEFT: #cccccc 1px solid; HEIGHT: 131px
    }
    #program_menu .f {
    FONT-SIZE: 0px; BACKGROUND: url(http://zixun.hunantv.com/source/images/zixun/bg.gif) no-repeat 0px -170px; HEIGHT: 5px
    }
    #program_menu .pm_list {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px
    }
    #program_menu .pm_list UL {
    BACKGROUND: url(http://zixun.hunantv.com/source/images/zixun/pmlist_bg.gif) 50% top; WIDTH: 100%
    }
    #program_menu .pm_list LI {
    FLOAT: left; WIDTH: 50%; COLOR: #333333; LINE-HEIGHT: 16px; HEIGHT: 16px
    }
    #program_menu .pm_list LI SPAN.t {
    FONT-WEIGHT: bold; FONT-SIZE: 11px; FLOAT: left; MARGIN-LEFT: 10px; WIDTH: 45px; COLOR: #cc3300; HEIGHT: 16px
    }
    #program_menu .live {
    PADDING-LEFT: 10px; FLOAT: left; LINE-HEIGHT: 25px; HEIGHT: 25px
    }
    #program_menu .live A {
    COLOR: #000000; TEXT-DECORATION: underline
    }
    #program_menu .live A:hover {
    COLOR: #ffffff
    }.fix {
    CLEAR: both
    }.sp {
    MARGIN-BOTTOM: 10px
    }.f {
    FONT-SIZE: 0px; BACKGROUND: url(http://zixun.hunantv.com/source/images/zixun/bg.gif) no-repeat 0px -85px; OVERFLOW: hidden; HEIGHT: 5px
    }
    </style>
    <script type="text/javascript">
    var xmlHttp; //解析XML文件
    var toDay; //当天日期
    var curDate, curTime, curWeek, curHour, curMin; //当前的时间
    var channelObject, channelDateObject, channelPlayBillObject, curDayDateObject; //频道对象//每次显示N个节目function createXMLHttpRequest()
    {
    if (window.ActiveXObject)
    {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }else if (window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest("Msxml2.XMLHTTP.3.0");
    }
    }function doSearch(url)
    { createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET",url,"true");
    xmlHttp.send(null);
    }
    function handleStateChange()
    {
    if (xmlHttp.readyState == 4)
    {
    if (xmlHttp.status == 200)
    {
    parseXML();
    }
    }
    }/**
     * 获取当前的时间
     *
     */
    function getCurTime() 
    {
    toDay = new Date();
    curDate = toDay.getFullYear().toString() + '.' + (toDay.getMonth() + 1).toString() + '.' + toDay.getDate().toString();
    curTime = (toDay.getMinutes() < 10) ?toDay.getHours().toString() + 0 +  toDay.getMinutes(): toDay.getHours().toString() + toDay.getMinutes();
    curWeek = (toDay.getDay() == 0) ? 7 : toDay.getDay();
    curHour = (toDay.getHours() < 10) ? toDay.getHours() + 0 : toDay.getHours();
    curHour = (curHour == 00) ? 24 : curHour;
    curMin = (toDay.getMinutes() < 10) ? toDay.getMinutes() + 0 : toDay.getMinutes();
    }function parseXML()
    {
    channelObject = xmlHttp.responseXML.getElementsByTagName("channel");
    //默认显示湖南卫视的当天的节目预告
    getDateObject(0);
    }/**
     * 获取指定频道的一周的节目信息
     * cid 频道ID
     */
    function getDateObject(cid)
    {
    getCurTime(); curDayDateObject = channelObject[cid].getElementsByTagName("playdate");
    getBillObject((curWeek-1));
    onTab(curWeek-1,'tab',7);
    }/**
     * 获取指定某一天的节目信息
     * weekid 星期ID
     */
    function getBillObject(weekid)
    {
    var curDayBillObject = curDayDateObject[weekid].getElementsByTagName("playbill");
    //var liArray = new Array();
    var liStr = "";
    for (i = 0; i < curDayBillObject.length;i++)
    {
    liStr += "<li><span class='t'>" + curDayBillObject[i].firstChild.data.Trim().substr(0,5) + "</span>";
    if (curDayBillObject[i].getAttribute('album') != "")
    {
    liStr += "<span class='name'><a href=\""+ curDayBillObject[i].getAttribute('album') +"\">" + curDayBillObject[i].firstChild.data.Trim().substr(5,15) + "</a></span>";
    }
    else
    {
    liStr += "<span class='name'>" + curDayBillObject[i].firstChild.data.Trim().substr(5,15) + "</span>";
    }
    liStr += "</li>";
    //liArray.push(liStr);
    }
    document.getElementById("tab_sub_" + weekid).innerHTML = liStr;
    }String.prototype.Trim = function() 
    {
      return this.replace(/(^\s*)|(\s*$)/g,'');
    }Date.prototype.DateAdd = function(Number) 
    {
    var dtTmp = this
    return new Date(Date.parse(dtTmp.toGMTString()) + (86400000 * Number));
    }Date.prototype.toString = function(showWeek) 

     return this.getFullYear().toString() + '.' + (this.getMonth() + 1).toString() + '.' + this.getDate().toString();
    }
    /**
     * 常用Tab切换
     * tabid 当前值
     * tab 名称
     * tab 数目
     * 选中的样式名称
     */
    function onTab(tabid,tabname,tablength,tabclass)
    {
    tabclass = tabclass == undefined ? 'current' : tabclass;
    for(i=0;i<tablength;i++)
    {
    if(tabid == i)
    {
    document.getElementById(""+tabname+"_"+i+"").className = tabclass;
    }else{
    document.getElementById(""+tabname+"_"+i+"").className = '';
    }
    }
    var subname = tabname + "_sub";
    for(j=0;j<tablength;j++)
    {
    if(tabid == j)
    {
    document.getElementById(""+subname+"_"+j+"").style.display = 'block';
    }else{
    document.getElementById(""+subname+"_"+j+"").style.display = 'none';
    }
    }
    }</script>
    </head><body topmargin="0" leftmargin="0">
    <div class="col_2a_1">
      <div id="program_menu" class="sp">
    <div class="tab">
    <h2 class="title"><a href="#">收视指南</a></h2>
    <ul>
    <li><a id="tab_0" onmouseover="javascript:onTab(0,'tab',7);getBillObject(0);">周一</a></li>
    <li><a id="tab_1" onmouseover="javascript:onTab(1,'tab',7);getBillObject(1);">周二</a></li>
    <li><a id="tab_2" onmouseover="javascript:onTab(2,'tab',7);getBillObject(2);">周三</a></li>
    <li><a id="tab_3" onmouseover="javascript:onTab(3,'tab',7);getBillObject(3);">周四</a></li>
    <li><a id="tab_4" onmouseover="javascript:onTab(4,'tab',7);getBillObject(4);">周五</a></li>
    <li><a id="tab_5" onmouseover="javascript:onTab(5,'tab',7);getBillObject(5);">周六</a></li>
    <li><a id="tab_6" onmouseover="javascript:onTab(6,'tab',7);getBillObject(6);">周日</a></li>
    </ul>
    <span class="live"><a href="#" title="直播">直播</a></span>
    </div>
    <div class="b">
    <div class="pm_list">
    <ul id="tab_sub_0"></ul>
    <ul id="tab_sub_1"></ul>
    <ul id="tab_sub_2"></ul>
    <ul id="tab_sub_3"></ul>
    <ul id="tab_sub_4"></ul>
    <ul id="tab_sub_5"></ul>
    <ul id="tab_sub_6"></ul>
    <div class="fix"></div>
    </div>
    </div>
    <div class="f"></div>
      </div>
    </div>
    </body>
    </html>看看到底哪里出了问题,谢谢
      

  4.   

    下面这句,return的前面有一个全角的空格Date.prototype.toString = function(showWeek) 

    return this.getFullYear().toString() + '.' + (this.getMonth() + 1).toString() + '.' + this.getDate().toString();
    }另外,无处调用doSearch函数,所以当调用getBillObject函数时报错:curDayDateObject为空或不是对象
      

  5.   

    zyzy15,我太崇拜你了,你简直就是神了。再不结帖,就要有人拿砖拍我了,哈哈。再次感谢。