大家进来看看，这样的功能能实现吗？

lz到底啥意思？假设楼主意思是，点tabA，就显示GVa，tabB就显示GVb。那你把gv拖进这些div里就好了呀- -||有啥困难？每个tab都设置别的div的style.display=none，自己对应的div的display=block.

我是这样做的！就是不现实GridView！因为我用纯javascript+div，没拖服务器控件，可以显示，拖了后，
点A “内容A”显示 "内容A"是我在div中做的标记，是文字但就GridView不显示！我也是很纳闷！因为 “内容A”标记都显示出来了! 放在的GridView也应该显示出来啊！

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab.aspx.cs" Inherits="Tab" %><!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 runat="server">
    <title>选项卡切换块</title>
<script type="text/javascript">
  function Click(x){
    var grid = x.parentNode.getElementsByTagName("td");
var ct = document.getElementsByTagName("div");
for(i=0;i<grid.length;i++){
if(x==grid[i]){
          grid[i].className = "down";
         ct[i].className = "dis";
}else{
  grid[i].className = "up";
  ct[i].className = "undis";
}
}
  }
</script>
<style type="text/css">
a{display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  text-align:center;
  outline:none;
  color:#333;
  font-weight:bold;}
a:visited{color:#333;}
.down{background:#fff;}
.up{background:#333;}
.up a{color:#fff;}
.dis{display:block;}
.undis{display:none;}
</style>
</head>
<body>
    <form id="form1" runat="server">
<table width="300" align="center" cellpadding="0" cellspacing="1">
<tr>
   <td width="100" onclick="Click(this);" class="down" style="height: 6px"><a href="#" hidefocus="true">项目A</a></td>
   <td width="100" onclick="Click(this);" class="up" style="height: 6px"><a href="#" hidefocus="true">项目B</a></td>
   <td width="100" onclick="Click(this);" class="up" style="height: 6px"><a href="#" hidefocus="true">项目C</a></td>
</tr>
</table>
<div class="dis">
<table width="300" height="150" align="center" cellpadding="0" cellspacing="0" >
<tr>
   <td>内容块A<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
           GridLines="None" Width="299px">
           <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
           <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
           <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
           <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
           <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
           <AlternatingRowStyle BackColor="White" />
       </asp:GridView>
   </td>
</tr>
</table>
</div>
<div class="undis">
<table width="300" height="150" align="center" cellpadding="0" cellspacing="0" >
<tr>
   <td>内容块B<asp:GridView ID="GridView2" runat="server" CellPadding="4" ForeColor="#333333"
           GridLines="None" Width="303px">
           <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
           <RowStyle BackColor="#E3EAEB" />
           <EditRowStyle BackColor="#7C6F57" />
           <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
           <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
           <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
           <AlternatingRowStyle BackColor="White" />
       </asp:GridView>
   </td>
</tr>
</table>
</div>
<div  class="undis">
<table width="300" height="150" align="center" cellpadding="0" cellspacing="0">
<tr>
   <td>内容块C<asp:GridView ID="GridView3" runat="server" CellPadding="4" ForeColor="#333333"
           GridLines="None" Width="300px">
           <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
           <RowStyle BackColor="#EFF3FB" />
           <EditRowStyle BackColor="#2461BF" />
           <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
           <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
           <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
           <AlternatingRowStyle BackColor="White" />
       </asp:GridView>
   </td>
</tr>
</table>
</div>
    </form>
</body>
</html>

Gridview绑定很简单，不贴了！

用menu啊,他是专门为这种菜单而生的

MenuItem mi1 = new MenuItem();
        MenuItem mi2 = new MenuItem();
        MenuItem mi3 = new MenuItem();
        mi1.Text = "aa";
        mi2.Text = "bb";
        mi3.Text = "cc";

        mi2.ChildItems.Add(mi3);
        mi1.ChildItems.Add(mi2);
        Menu1.Items.Add(mi1);
其中mi1是一级菜单项，mi2是二级菜单项,mi3是三级菜单项。

    /// <summary>
    /// 加载Menu
    /// </summary>
    /// <param name="sortId">选择过滤条件</param>
    /// <param name="flag">菜单级别</param>
    public void addMenu(int sortId, MenuItem flag)
    {
        //绑定ds到DataView
        DataView dvMenu = new DataView(ds.Tables[0]);
        //过滤某次加载的菜单项
        dvMenu.RowFilter = "sort_sort1Id  =  " + sortId;
        //循环加载
        foreach (DataRowView Row in dvMenu)
        {
            MenuItem m1 = new MenuItem();
            //一级菜单绑定
            if (flag == null)
            {
                m1.Text = Row["sortName"].ToString();
                Menu1.Items.Add(m1);
                //递归调用
                addMenu(Int32.Parse(Row["sortId"].ToString()), m1);
            }
            //二级菜单绑定
            else
            {
                MenuItem m2 = new MenuItem();
                m2.Text = Row["sortName"].ToString();
                m2.NavigateUrl = "sort.aspx?sortId=" + Row["sortId"].ToString();
                //绑定二级菜单到某父菜单
                flag.ChildItems.Add(m2);
                //递归调用
                addMenu(Int32.Parse(Row["sortId"].ToString()), m2);
            }        }
    }

如果用javascript+ div 实现，怎么弄啊！第一次加载时候，可以显示A选项A中GridView，如果点了B，C不显示B,C中的GridView。再回去点A，A中的GridView也不现实！

public void BindMenu(Menu mn,MenuItem menu,string mainMenu,string sql)
　　 {
　　 MenuItem mitem = null;
　　 DB db = new DB();
　　 DataSet ds = db.GetDataSet(sql, "table1");
　　 DataTable dTable = ds.Tables[0];
　　 DataRow[] drow = dTable.Select(" parentId='" + mainMenu + "'");
　　
　　 foreach (DataRow dr in drow)
　　 {
　　 mitem = new MenuItem();
　　 mitem.Text = dr["modulName"].ToString();
　　 mitem.Value = dr["modulId"].ToString();
　　 mitem.NavigateUrl = "Default.aspx";
　　 if (menu == null)
　　 {
　　 mn.Items.Add(mitem);
　　 }
　　 else
　　 {
　　 menu.ChildItems.Add(mitem);
　　 }
　　 DataSet dst = db.GetDataSet(sql, "table2");
　　 DataTable dtb = dst.Tables[0];
　　 DataRow[] dar = dtb.Select(" parentId='" + mitem.Value + "'");
　　 mainMenu = mitem.Value;
　　 BindMenu(Menu1, mitem, mainMenu, sql);
　　 }
　　 }

可能是GV或者别的服务器控件解析后也会包含div，那么你js里的按照div索引的方式可能就不准确了。
你应该给各个div分配id，取div的时候根据id来取。

谢谢zzxap写了这么多！我这个是突发奇想！想弄来玩下！尝试下！觉得这种想法应该没错！像新浪新闻的那个选项卡也应该用相似的方法实现的吧！

除非使用panel postback否则得页面onload的时候就得把gridview绑定

要是这样的问题的话!你参考下CSDN的帖子浏览页面...都是一样的选项卡啊!把你的GRIDVIEW放进你的DIV里面就好了,没什么的自己调试下子!跟踪调试下子就好了....希望能帮助到你!

确实是在onload是把gridveiw绑定了！这样3个GirdView都有内容，只是两个被隐藏了！我点另外的选项的选项卡！隐藏的也应该显示已绑定好的数据！这是我的想法!不知道对不对！

var grid = x.parentNode.getElementsByTagName("td");
楼主，你没调试吗，grid的值是空的

var ct = document.getElementsByTagName("div");
alert(ct.length)//7

这样肯定是可以做的，GRIDVIEW加载到你的div中没有？

你是想做成舌签的功能吗？其它的都不变，把内容部分换成listlive就可以了

这个也只能实现我个那个一样的功能
第一次加载时候，可以显示A选项A中GridView，如果点B，C不显示B,C中的GridView。再回去点A，A中的GridView也不现实！
是不是我的数据源帮定有问题，我把三个GridView绑定都写在Page_Load()中了public partial class Tab : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindTab();
        }       }
    public void BindTab()
    {
        string strSql = "select ID,strFileName from FileInfo";
        this.GridView1.DataSource = new DB().runSqlGetTable(strSql);
        this.GridView1.DataBind();
        this.GridView2.DataSource = new DB().runSqlGetTable(strSql);
        this.GridView2.DataBind();
        this.GridView3.DataSource = new DB().runSqlGetTable(strSql);
        this.GridView3.DataBind();
    }
}
这样写行吗？

真的不知道错哪里了！难道纯js+div里放服务器控件做不出这样的切换效果！

既然已经做好了那么绑定一下数据库看能不能显示出来要不就直接放几个textbox测试一下如果textbox都能显示就检查一下代码吧

用asp.net的ajax control toolkit中的Accrodion就能实现了，嘿嘿，这个可是偷懒的好办法哦。

TextBox可以显示出来！现在的问题就是没有绑定数据了吗？我把三个GridView绑定都写在Page_Load()中每次运行加载时候，可以显示A选项A中GridView，如果点B，C不显示B,C中的GridView。再回去点A，A中的GridView也不现实！
难道不能把三个GridView绑定都写在Page_Load()中？知道的请麻烦解答下！

用6个GV,如果数据再多点的话你看看你生成的HTML有多少加密的乱码，我觉得用一个Repeater就可以实现，最多用一个Repeater嵌套一下。
例如 6个选项卡 div1，div2，div3...Repeater生成 _div1,_div2,_div3... 根据选项卡的ID，显示相应的DIV,,

把你的页面aspx贴出来，肯定写错了，
和xie_yanke 的肯定有区别

document的第一个div是 “<div class="dis">”
第二个div是 gridview1的那个div，不是你想的 “<div class="undis">” 那个！！

DIV的样式都已经有了吧gridview直接放进去不就行了，好像没什么问题的

找到个效果你看看是不是这样的 http://www.cnbruce.com/blog/showlog.asp?cat_id=5&log_id=686
*****************************************************************************
ㄗs:
当你说出了你想说的，做了你想做的之后，你会发现，天是那么蓝，自己是那么可爱。不是因为你得到了你想得到的，而是因为你是在为自己而活着。

谢谢你提供的资料，我加了几个GridView尽然可以了，尽然用表格可以，我想我原先问题估计出现在Div的问题上！
还有你的那句话
“当你说出了你想说的，做了你想做的之后，你会发现，天是那么蓝，自己是那么可爱。不是因为你得到了你想得到的，而是因为你是在为自己而活着。”
不错！

调试易

大家进来看看，这样的功能能实现吗？

解决方案 »