有很多种方法都可以实现这种tab control效果。最简单的是根据不同的页面设置选中和未选中状态,菜单样式就在css里面设置好了

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TablePanel演示</title>
    <style type="text/css">
    *{font-size:12px;}
    ul{margin:0px; padding:0px;}

    .tabPannel{width:300px; border:1px solid #666666; float:left;}
    .tabPannel .tabContainer{width:300px;float:left; border-bottom:1px solid #666666;}
    .tabPannel .tabContainer li{list-style-type:none; width:50px; height:30px; line-height:30px; border-right:1px solid #666666; text-align:center; float:left;}
    .tabPannel .tabContainer .mouseover{background-color:#809CE1;}
    .tabPannel .tabContainer .mouseout{background-color:#118FE9;}
    .tabPannel .tabContentContainer{width:290px; height:200px;  float:left;}
    </style>
    <script type="text/javascript" src="../Tom.js"></script>
    </head>
    <body>
    <div  class="tabPannel">
    <div class="tabContainer">
    <ul>
    <li id="tab1" tabContentId="tabContent1" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">体育</li>
    <li id="tab2" tabContentId="tabContent2" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">手机</li>
    <li id="tab3" tabContentId="tabContent3" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">财经</li>
    <li id="tab4" tabContentId="tabContent4" cssClassMouseover="mouseover" cssClassMouseOut="mouseout" class="mouseout">足球</li>
    </ul>
    </div>
    <div id="tabContent1" class="tabContentContainer" style="display:block;">
    <br/>
    &nbsp;体育
    </div>
    <div id="tabContent2" class="tabContentContainer" style="display:none">
    <br>
    &nbsp;手机
    </div>
    <div id="tabContent3" class="tabContentContainer" style="display:none">
    <br>
    &nbsp;财经
    </div>
    <div id="tabContent4" class="tabContentContainer" style="display:none">
    <br>
    &nbsp;足球
    </div>
    </div>
    <script>
    var tabIdArrary = new Array("tab1", "tab2", "tab3", "tab4");
    new Tom.Widget.TabPannel(tabIdArrary);
    </script>
    </body>
    </html>
    tom.js
    /**
     * 作者:枯井
     * 日期:2007-12-08
     * 描述:对元素进行包装,生成TabPanel
     *//// <summary>
    /// 构造函数需要传入一个数组,其中存储了需要包装的系了元素ID
    /// </summary>
    Tom.Widget.TabPannel = function(tabIdArray)
    {
    this.tabArray = new Array();

    for(var i = 0; i < tabIdArray.length; i++)
    {
    this.tabArray[i] = document.getElementById(tabIdArrary[i]);
    if(!this.tabArray[i])
    {
    alert("ID为" + tabIdArray[i] + "的元素不存在");
    return;
    }
    }

    var tabPannel = this;
    for(var i = 0; i < tabPannel.tabArray.length; i++)
    {
    tabPannel.tabArray[i].onmouseover = function(event)
    {
    var srcElement;
    if(window.event)
    {
    srcElement = window.event.srcElement;
    }
    else
    {
    srcElement = event.target;
    }

    var tabContent;
    for(var i = 0; i < tabPannel.tabArray.length; i++)
    {
    tabContent = document.getElementById(tabPannel.tabArray[i].attributes.getNamedItem("tabContentId").nodeValue);
    if(srcElement.id != tabPannel.tabArray[i].id)
    {
    tabContent.style.display = "none";
    }
    else
    {
    tabContent.style.display = "block";
    }
    } srcElement.className = srcElement.attributes.getNamedItem("CssClassMouseover").nodeValue;
    }

    tabPannel.tabArray[i].onmouseout = function(event)
    {
    var srcElement;
    if(window.event)
    {
    srcElement = window.event.srcElement;
    }
    else
    {
    srcElement = event.target;
    }
    srcElement.className = srcElement.attributes.getNamedItem("CssClassMouseout").nodeValue;
    }
    }}
      

  2.   

    可以用JAVASCRIPT来实现
    点击选项卡 那个选项卡按钮切换CSS样式 其它选项卡换回CSS样式内容用AJAX来读取 或则直接用DIV 显示隐藏来实现我说的内容没有涉及控件  因为我还不太会使用控件
      

  3.   

    好像可以用MutilView来做,加上CSS样式表就可以做到类似的效果了.看一本书上做过
      

  4.   

    效果不难,如果不涉及到数据的更换的话。
    function onclickchange(obj){
    obj.classname="classname1";
    }就应该OK的
      

  5.   

    最土的方法
    使用最原始的Ajaxxmlhttp然后使用vs上的一般处理程序
    点击选项卡的时候,发出请求,在一般处理程序中将那个Tab页的内容使用整理好整个回传回来至于Tab页也是最土的方法Tab页是一个大DIV中的几个链接。。A标签可以设置样式背景图的,然后下面显示的是一个DIV,这个DIV只管接受来自一般处理程序的响应文本就是了至于响应文本的内容,不同的A标签发不出同的请求就是了=。=不过这样做出来很粗糙吧
      

  6.   

    谢谢大家的指点哦!!CSDN还是好人多呀!!
    郁闷,住的地方宽带还没拉上,真不方便,一会回住处了试验一下!!2楼大哥,明天记得回帖哦!
      

  7.   

    可以直接使用ajax的TabContainer控件来实现
      

  8.   

    装上dreamweavercs3就模板可以用!
      

  9.   

    主要就是AJAX局部刷新,估计考试也就是考这一点
      

  10.   

    用.NetAjaxTookit里面的tabContainer控件(这个比较简单)
    或者用js实现
      

  11.   

    介绍个第3方控件给你Telerik.RadControl
      

  12.   

    tab切换?你面试的什么公司啊,ajaxcontroltoolkit里根本就有这个控件的么
      

  13.   

    用JAVASCRIPT就可以,点击某个选项卡 切换相应CSS样式 其它选项卡换回默认CSS样式
    具体的数据和内容可以用AJAX来读取 或则直接写到页面上,默认css帮助隐藏
      

  14.   

    tab菜单,不过做过,见过别人做过,div+css,使用js控制
      

  15.   

    我在页面上做了个可以下拉的菜单,是用css和js做的,,然后又在页面上拖了个AJAX开源控件包里的一个tab控件。
    现在我遇到的问题是,,我要点击菜单上下拉菜单的某一项时,要在tab控件上增加一个tab并显示内容。。
    这个过程要如何实现?而且,我先做了菜单,然后往页面上拖scriptmanager和tab控件时(都是ajax控件),,页面提示出错,我该怎么处理?