采用Table+CSS来实现的模拟选项卡,现在有一个十分严重的问题:窗体启动第一卡片是当前项,选中第二卡片,上面有一个LinkButton1,单击,因为是服务器控件,窗体刷新,之后当前项又变成了第一卡片,怎么样能让刷新之后当前项还是第二卡片呢?请大家看看下面的代码,其中有一个secBoard(n)函数,我在Linkbutton3_Click中这样调用这个函数:Linkbutton3.Attributes.Add("onClick","secBoard(1)");可是不行,没有作用,请大家帮我啊!谢谢   <style type=text/css>
td { 
  font-size: 12px;
  color: #000000;
  line-height: 150%;
  }
.sec1 { 
  background-color: #EEEEEE;
  cursor: hand;
  color: #000000;
  border-left: 1px solid #FFFFFF;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid gray;
  border-bottom: 1px solid #FFFFFF
  }
.sec2 { 
  background-color: #D4D0C8;
  cursor: hand;
  color: #000000;
  border-left: 1px solid #FFFFFF; 
  border-top: 1px solid #FFFFFF; 
  border-right: 1px solid gray; 
  font-weight: bold; 
  }
.main_tab {
  background-color: #D4D0C8;
  color: #000000;
  border-left:1px solid #FFFFFF;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray; 
  }
</style>
   <script language=javascript>
function secBoard(n)
{
 for(i=0;i<secTable.cells.length;i++)
  secTable.cells[i].className="sec1";
 secTable.cells[n].className="sec2";
 for(i=0;i<mainTable.tBodies.length;i++)
  mainTable.tBodies[i].style.display="none";
 mainTable.tBodies[n].style.display="block";
}
</script>
   <table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>
    <tr height=20 align=center> 
     <td class="sec2" onclick="secBoard(0)" width="115">工商执照</td>
     <td class="sec1" onclick="secBoard(1)" width="115">电子税务</td>
    </tr>
   </table>
   <table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab>
    <tbody style="display:block;"> 
    <tr> 
     <td align=center valign=top> <br>
      <br>
      这里填加内容,略去。1 </td>
    </tr>
    </tbody> <tbody style="display:none;"> 
    <tr> 
     <td align=center valign=top> <br>
      <br>
      <asp:LinkButton id="LinkButton1" runat="server" ForeColor="Red">
    </td>
    </tr>
    </tbody> 
   </table>

解决方案 »

  1.   

    <html>
    <head>
    <title>滑动菜单</title>
    </head>
    <style>
    body {font-size:12px;font-family:宋体}
    ul.TabBarLevel1{
    list-style:none;
    margin:0;
    padding:0;
    height:29px;
    background-image:url(tabbar_level1_bk.gif);
    }
    ul.TabBarLevel1 li{
    float:left;
    padding:0;
    height:29px;
    margin-right:1px;
    background:url(tabbar_level1_slice_left_bk.gif) left top no-repeat;
    }
    ul.TabBarLevel1 li a{
    display:block;
    line-height:29px;
    padding:0 20px;
    color:#333;
    background:url(tabbar_level1_slice_right_bk.gif) right top no-repeat;
    white-space: nowrap;
    }
    ul.TabBarLevel1 li.Selected{
    background:url(tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
    }
    ul.TabBarLevel1 li.Selected a{
    background:url(tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
    }ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
    color:#333;
    }
    ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
    color:#F30;
    text-decoration:none;
    }
    ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
    color:#000;
    }
    ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
    color:#F30;
    text-decoration:none;
    }
    div.HackBox {
      padding : 2px 2px ;
      border-left: 2px solid #6697CD;
      border-right: 2px solid #6697CD;
      border-bottom: 2px solid #6697CD;
      display:none;
    }
    </style>
    <body>
    <div id="Whatever">
    <ul class="TabBarLevel1" id="TabPage1">
    <li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">单道试题</a></li>
    <li  id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">多道试题</a></li>
    <li  id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');">成套试题</a></li>
    <li  id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">留言簿</a></li>
    </ul>
    <div id="cnt">
    <div id="dTab1" class="HackBox">代码如下:
                    请输入单道试题
    </div>
    <div id="dTab2" class="HackBox" style="display:block">代码如下:
                    <!--这里放入信息-->
                       哈哈哈哈2
    </div>
    <div id="dTab3" class="HackBox">代码如下:
                    <!--这里放入信息-->
                       哈哈哈哈3
    </div>
    <div id="dTab4" class="HackBox">代码如下:
                    <!--这里放入信息-->
                       哈哈哈哈4
    </div>
    </div>
    </div>
    <script language="JavaScript">
    //Switch Tab Effect
    function switchTab(tabpage,tabid){
            var oItem = document.getElementById(tabpage);   
    for(var i=0;i<oItem.children.length;i++){
    var x = oItem.children(i);
    x.className = "";
    var y = x.getElementsByTagName('a');
    y[0].style.color="#333333";
    }
    document.getElementById(tabid).className = "Selected";
    var dvs=document.getElementById("cnt").getElementsByTagName("div");
    for (var i=0;i<dvs.length;i++){
      if (dvs[i].id==('d'+tabid))
        dvs[i].style.display='block';
      else
         dvs[i].style.display='none';
    }
    }
    </script>
    </body>
    </html>
      

  2.   

    上面的也可以实现要求,也可以考虑MutiView
      

  3.   

    在secBoard(n)中
    加一句
    Form1.hidIndex.Value = n; //页面上放个hidden
    function window.onload)(
    {
        if(Form1.hidIndex.value != "")
        {
           setBoard(Form1.hidIndex.value);
        } 
    }
      

  4.   

    慕白兄,在我这里不好用,我的窗体名是MultiPageTabStrip.aspx,那是不是就要改成:
     MultiPageTabStrip.hidIndex.Value = n;?
     MultiPageTabStrip.hidIndex.Value = n;这句话加在secBoard(n)中的哪个位置?我是这样改的:<script language="javascript">
    function secBoard(n)
    { for(i=0;i<secTable.cells.length;i++)
      secTable.cells[i].className="sec1";
     secTable.cells[n].className="sec2";
     for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies[i].style.display="none";
     mainTable.tBodies[n].style.display="block";
     MultiPageTabStrip.hidIndex.Value = n;
    }


    function window.onload()
    {
        if(MultiPageTabStrip.hidIndex.value != "")
        {
           setBoard(MultiPageTabStrip.hidIndex.value);
        } 
    }
    </script>
      

  5.   

    你看看<form id 看看这个id
      

  6.   

    <form id 这个是Form1谢谢您帮忙,可是改过了还是没有反应,为何呢?<script language="javascript">
    function secBoard(n)
    {
     for(i=0;i<secTable.cells.length;i++)
      secTable.cells[i].className="sec1";
     secTable.cells[n].className="sec2";
     for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies[i].style.display="none";
     mainTable.tBodies[n].style.display="block";
     Form1.hidIndex.Value = n;
    }

    function window.onload()
    {
        if(Form1.hidIndex.value != "")
        {
           setBoard(Form1.hidIndex.value);
        } 
    }
    </script>
      

  7.   

    能不能实现在不刷新的情况下能操作数据库呢?比如在javascript中能实现数据库的操作吗?
      

  8.   

    hidIndex 这个控件加了吗? 是runat="server"的.
      

  9.   

    哦,我加了,但不是runat="server"的,多谢,我试一试
      

  10.   

    现在是是runat="server"的了,可是还是不好用啊,一刷新还是回到第一卡片
      

  11.   

    这样检查一下.1.看 function window.onload()这个函数有没有执行
    2.看hidIndex有没有值.
      

  12.   

    1.看 function window.onload()这个函数有没有执行
    里面加个alert
    2.看hidIndex有没有值 看html源码.
      

  13.   

    alert('不能添加重复的单号!');   这样alert对吗?我加在onload当中了,没有反应
      

  14.   

    那就是这个函数没有执行.
    直接把这个写在页面的最后面<Script>
    if(Form1.hidIndex.value != "")
        {
           setBoard(Form1.hidIndex.value);
        } </Script>
      

  15.   

    hidIndex有没有值我看不出来,function window.onload()这个函数我是知道肯定被执行了的
      

  16.   

    hidIndex有没有值我看不出来========看看html源码,查找到这个控件看它的value
      

  17.   

    hidIndex一定是空的,没有值的,因为我把if(Form1.hidIndex.value != "")这个判断去掉了,就能弹出“不能添加重复的单号!”
      

  18.   

    我在后台中这样加了一句,想强制的把hidIndex.Value的值写死:
    private void Linkbutton7_Click(object sender, System.EventArgs e)
    {
    hidIndex.Value="1";
    }结果还是不行,hidIndex.Value还是没有值
      

  19.   

    把那个函数写在页面的最后面也不行,就是没有反应
    我加了hidIndex.Value="1";这句后,程序也是没有反应,我感觉是setBoard(Form1.hidIndex.value);这句好像没有起作用慕白兄能否再帮着分析一下原因?
      

  20.   

    你那个linkbutton执行什么?不用这个不行吗不让它刷新
    我刚解决了一个静态下downlist和lable联动的问题
      

  21.   

    我把程序改成了:
    function secBoard(n)
    {
    for(i=0;i<secTable.cells.length;i++)
      secTable.cells[i].className="sec1";
     secTable.cells[n].className="sec2";
     for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies[i].style.display="none";
     mainTable.tBodies[n].style.display="block";
    Form1.hidIndex.Value = 2;
    }

    function window.onload()
    {
           setBoard(Form1.hidIndex.value);
           alert('不能添加重复的单号!');
    }会弹出“不能添加重复的单号”,但是窗体加载的时候依然是第一卡片,刷新也是第一卡片,hidIndex.Value的值已经写死了是2了,window.onload()这个函数又被执行了,可是预期的效果没有出现,这是为什么呢?
      

  22.   

    用这个看看?
    function window.onload()
    {
           setBoard(2);
      
    }
      

  23.   

    TO:lxs5i5j() ( )你那个linkbutton执行什么?不用这个不行吗不让它刷新
    我刚解决了一个静态下downlist和lable联动的问-----------------
    linkbutton执行的是对数据库的增加删除操作,怎么能不刷新呢?静态下downlist和lable联动的问题我也在搞,没搞明白,您帮我看一眼,我是这样做的:function onc()
    {
    document.all["label26"].innerText =  Form1.DropDownList1.value;
    }然后:
    private void Page_Load(object sender, System.EventArgs e)
    {
    DropDownList1.Attributes.Add("onclick","onc()");但是没有任何反应
      

  24.   

    如果使用linkbutton的服务器端事件的话,设计就需要更改
    建议这样的情况不要使用linkbutton,使用纯客户端,使用js来进行操作。
      

  25.   

    慕白兄:
    直接用setBoard(2)试的,还是达不到预期的效果真是服了,所有的javascript代码在我的程序里面没有一个能起作用的,所有的函数都不好用
      

  26.   

    to :phili1999(大鸟) 如果使用linkbutton的服务器端事件的话,设计就需要更改
    建议这样的情况不要使用linkbutton,使用纯客户端,使用js来进行操作。---------------------
    单单用js能对数据库进行操作吗?也就是能做到在页面不刷新的情况下进行数据的插入操作吗?我沮丧极了,真是无奈啊
      

  27.   

    TO:zdybyhum()把DropDownList1.Attributes.Add("onchange","onc()"); 放if(!IsPostBack)里面还有是...Add("onchange","onc()"); 不是...Add("onclick","onc()");
      

  28.   

    我给你一段现成的吧/************* HTML ***************/
    <div class="tabs" id="past">
    <div class="tabswitcher">
    <ul>
    <li class="current"><a onclick="JavaScript:tabOff('2003'); tabOff('2004'); tabOn('2005', event);" title="" id="tab2005">2005年</a></li>
    <li><a onclick="JavaScript:tabOff('2003'); tabOn('2004', event); tabOff('2005');" title="" id="tab2004">2004年</a></li>
    <li><a onclick="JavaScript:tabOn('2003', event); tabOff('2004'); tabOff('2005');" title="" id="tab2003">2003年</a></li>
    </ul>
    </div>
    <div class="tabpages">
    <div class="tabpage" id="2005">
    </div>
    <div class="tabpage" id="2004" style="display:none;">
    </div>
    <div class="tabpage" id="2003" style="display:none;">
    </div>
    </div>
    </div><!-- tabs -->/****************** css **********************/
    /********** 图片我可以邮件发给你 *************/
    div.tabs
    {
    clear:both;
    }
    div.tabs div.tabpages
    {
    }
    div.tabs div.tabpages div.tabpage
    {
    position:relative;
    float:left;
    padding:4px;
    border-color:#000;
    border-style:solid;
    border-width:0 0px 0px 0px;
    }div.tabs div.tabswitcher
    {
    background:#DAE0D2 url("../images/bg_tabs.gif") repeat-x bottom;
    float:left;
        width:100%;
        font-size:9pt;
        line-height:normal;
        width:100%;
    }
    div.tabs div.tabswitcher ul
    {
    float:left;
        margin:0;
        padding:10px 0 0 15px;
        list-style:none;
        width:100%;
    }
    div.tabs div.tabswitcher li
    {
        float:left;
        background:url("../images/left.gif") no-repeat left top;
        margin:0;
        padding:0 0 0 9px;
    }
    div.tabs div.tabswitcher a
    {
        float:left;
        display:block;
        background:url("../images/right.gif") no-repeat right top;
        padding:5px 15px 4px 6px;
        font-family:宋体,Geogia,Serif;
        font-size:small;
        text-decoration:none;
        font-weight:bold;
        color:#765;
        cursor:hand;
    }
    /* Commented Backslash Hack
        hides rule from IE5-Mac \*/
    /* End IE5-Mac hack */
    div.tabs div.tabswitcher a:hover
    {
        color:#333;
    }
    div.tabs div.tabswitcher .current
    {
        background-image:url("../images/left_on.gif");
        border-width:0;
    }
    div.tabs div.tabswitcher .current a
    {
        background-image:url("../images/right_on.gif");
        color:#333;
        padding-bottom:5px;
    }
      

  29.   

    添加或删除完了之后用下面语句返回呢
     我一般用的是dropdownlistif(!Page.IsStartupScriptRegistered("upAlert")) 
      { 
        Page.RegisterStartupScript("upAlert",@"<script language='javascript'>alert('添加成功!')</script>"); 
      } 
      

  30.   

    TO:zdybyhum()把DropDownList1.Attributes.Add("onchange","onc()"); 放if(!IsPostBack)里面还有是...Add("onchange","onc()"); 不是...Add("onclick","onc()");
    --------------------------
    可以不放在if(!IsPostBack)里
      

  31.   

    直接用setBoard(2)试的,还是达不到预期的效果
    那就不是这个问题了.setBoard有问题.
      

  32.   

    谢谢大家的热心帮助!终于调试好了,可以用了,原因是这样的:
    函数:
    function secBoard(n)
    {
     for(i=0;i<secTable.cells.length;i++)
      secTable.cells[i].className="sec1";
     secTable.cells[n].className="sec2";
     for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies[i].style.display="none";
     mainTable.tBodies[n].style.display="block";
    Form1.hidIndex.Value = 2;
    }在
    function window.onload()
    {
           secBoard(2);
    }
    中调用secBoard的时候,把secBoard写成了setBoard,呵呵,终于发现了,改过来就好用了但是还有一个很大的问题,就是选中第三选项卡,点BUTTON控件,刷新,虽然能够切换到第三选项卡,但是速度太慢了,奇慢,至少要五六秒钟,在这个时间里,可以很明显的看到先显示第一选项卡,再切换到第三选项卡,效果看起来很差,有什么办法能让它快一点呢?让人感觉不出来呢?
      

  33.   

    to uno(钢盅郭子) :谢谢,我的这个速度太慢了,不知道你的是不是无刷新的呢?如果不是,切换的速度怎么样?
    [email protected]
      

  34.   

    to lxs5i5j() :能把你刚解决的下拉框和Label联动的那个帖子的地址给我吗?谢谢!
      

  35.   

    http://community.csdn.net/Expert/topic/5290/5290852.xml?temp=.8878595