当前位置:编程学习 > C#/ASP.NET >>

怎样使tab2里面的button点击页面刷新后,还是显示tab2, 而不是tab1? 急!!!

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">    
    <title></title>

 
<script src="scripts/jquery.idTabs.min.js" type="text/javascript"></script>
<link href="scripts/main.css" rel="stylesheet" type="text/css" />  
      <script type="text/javascript"> 
  $("#usual1 ul").idTabs(); 
 
      function Valid()
       {
        var customer= document.getElementById("D8").value;
       
        if(document.getElementById("D8").value=="")
        {
        alert("please file in customer name!");
        return false;
        }
       }
 
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
      <div id="usual1" class="usual"> 
       <ul class="idTabs"> 
         <li><a class="selected" href="#tab1">Single Device</a></li> 
         <li><a href="#tab2">Multiple Devices</a></li> 
         <li><a href="#tab3">Multiple Testers</a></li> 
       </ul>     
    <div id="tab1" class="idTabs">
    </div>
     <div id="tab2" class="idTabs">
       <asp:TextBox ID="D8" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="check" OnClick="Button1_Click1"  OnClientClick="Valid(this.value)" />
     </div>
<div id="tab3" class="idTabs"></div>
    </div>
    </div>
    </form>
</body>
</html>


代码如上,怎样使客服端和后台 的检查textbox 是否为空,返回刷新页面时不会改变,始终都显示当前选中的tab2? 谢谢。


jquery.idTabs.min.js 用的是:
http://www.sunsean.com/idTabs/jquery.idTabs.min.js


main.css
/*  idTabs ~ Sean Catchpole  */


/* Style for Usual tabs */
.usual {
  background:#181818;
  color:#111;
  padding:10px 15px;
  width:400px;
  border:1px solid #222;
  margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
  display:block;
  padding:6px 10px;
  text-decoration:none!important;
  margin:1px;
  margin-left:0;
  font:10px Verdana;
  color:#FFF;
  background:#444;
}
.usual ul a:hover {
  color:#FFF;
  background:#111;
  }
.usual ul a.selected {
  margin-bottom:0;
  color:#000;
  background:snow;
  border-bottom:1px solid snow;
  cursor:default;
  }
.usual div {
  padding:5px 5px 4px 5px;
  padding-top:2px;
  margin-top:-10px;
  clear:left;
  background:snow;
  font:10pt Georgia;
}


.usual div a { color:#000; font-weight:bold; }

#usual2 { background:#0A0A0A; border:1px solid #1A1A1A; }
#usual2 a { background:#222; }
#usual2 a:hover { background:#000; }
#usual2 a.selected { background:snow; }
#tabs3 { background:#FF9; }

/* Style for various uses of tabs */

#freedom {
  float:left;
  width:90px;
  color:#68D;
  font:1.3em Cambria, Times New Roman, serif;
  font-style:italic;
}
#freedom li a {
  width:80px;
  text-align:left;
  padding:2px 6px 4px;
  background:#222;
  margin:1px;
  margin:0px;
  display:block;
  text-decoration:none;
  font-weight:bold;
  font-size:0.7em;
  font-style:normal;
}
#freedom li a:hover {
  background:#0A0A0A;
  width:86px;
}
#freedom li a.selected {
  background:#FFF;
  color:#000;
  width:90px;
  cursor:default;
}

.tabContainer {
  width:400px;
  margin:20px auto;
  padding-top:2px;
  background:#181818;
  border:1px solid #222;
}
.tabContainer h3 {
  padding-bottom:4px;
  color:#F60;
}
.tabContainer p {
  padding:2px 12px 10px;
  text-align:left;
}

#three {
  position:absolute;
  top:0;
  left:0;
  border-bottom:1px solid #444;
  border-right:1px solid #444;
}

#four {
  color:#D66;
  font:2em Cambria, Times New Roman, serif;
  position:fixed;
  bottom:10px;
  right:20px;
}

.imagebox {
  background:#040404;
  border:1px solid #1A1A1A;
  width:100px;
  height:90px;
  margin:10px auto;
}
.imagebox a {
  display:block;
  width:25px;
  height:25px;
  line-height:23px;
  float:left;
  text-decoration:none;
  background:#111;
}
.imagebox a:hover { background:#000; }
.imagebox a.selected {
  background:snow;
  color:#222;
  font-weight:bold;
}
.imagebox img { margin-top:6px; clear:both; }


/* Styles for Advanced Section */

#adv2 {
  width:500px;
  margin:6px auto;
  background:#181818;
}
#adv2 ul {
 display:block;
 width:50px;
 height:50px;
 float:left;
}
#adv2 li { float:left; }
#adv2 li.split { clear:both; }
#adv2 li a {
  display:block;
  height:25px;
  width:25px;
  line-height:22px;
  text-decoration:none;
  background:#222;
}
#adv2 li a:hover {
  background:#0A0A0A;
}
#adv2 li a.selected {
  background:snow;
  color:#111;
  font-weight:bold;
}

#adv2 span {
  height:50px;
  display:block;
  line-height:45px;
  width:450px;
  float:right;
  background:#181818;
}

#adv3 a {
  color:snow;
  font-size:2em;
  font-weight:bold;
  text-decoration:none;
  margin:6px;
}
#adv3 a:hover { color:#68D; }
#adv3 p {
  color:#888;
  margin:5px;
  font-style:italic; 
}
#adv3 p a {
  margin:0;
  color:#CCC;
  font-size:1em;
  font-weight:bold;
  text-decoration:underline;
}
#adv3 p a:hover { color:#FFF; }

#message {
  margin:10px auto;
  border:6px solid #222;
  width:240px;
  height:40px;
  background:#0D0D0D;
  font-size:1.3em;
  line-height:2em;
  color:#FC4;
}
--------------------编程问答--------------------
引用 楼主 tian1982 的回复:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">    
    <title></title>

 
<script src="scripts/jquery.idTabs.min.js" type="text/javascript"></script>
<link href="scripts/main.css" rel="stylesheet" type="text/css" />  
      <script type="text/javascript"> 
  $("#usual1 ul").idTabs(); 
 
      function Valid()
       {
        var customer= document.getElementById("D8").value;
       
        if(document.getElementById("D8").value=="")
        {
        alert("please file in customer name!");
        return false;
        }
       }
 
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
      <div id="usual1" class="usual"> 
       <ul class="idTabs"> 
         <li><a class="selected" href="#tab1">Single Device</a></li> 
         <li><a href="#tab2">Multiple Devices</a></li> 
         <li><a href="#tab3">Multiple Testers</a></li> 
       </ul>     
    <div id="tab1" class="idTabs">
    </div>
     <div id="tab2" class="idTabs">
       <asp:TextBox ID="D8" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="check" OnClick="Button1_Click1"  OnClientClick="Valid(this.value)" />
     </div>
<div id="tab3" class="idTabs"></div>
    </div>
    </div>
    </form>
</body>
</html>


代码如上,怎样使客服端和后台 的检查textbox 是否为空,返回刷新页面时不会改变,始终都显示当前选中的tab2? 谢谢。


jquery.idTabs.min.js 用的是:
http://www.sunsean.com/idTabs/jquery.idTabs.min.js


main.css
/*  idTabs ~ Sean Catchpole  */


/* Style for Usual tabs */
.usual {
  background:#181818;
  color:#111;
  padding:10px 15px;
  width:400px;
  border:1px solid #222;
  margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
  display:block;
  padding:6px 10px;
  text-decoration:none!important;
  margin:1px;
  margin-left:0;
  font:10px Verdana;
  color:#FFF;
  background:#444;
}
.usual ul a:hover {
  color:#FFF;
  background:#111;
  }
.usual ul a.selected {
  margin-bottom:0;
  color:#000;
  background:snow;
  border-bottom:1px solid snow;
  cursor:default;
  }
.usual div {
  padding:5px 5px 4px 5px;
  padding-top:2px;
  margin-top:-10px;
  clear:left;
  background:snow;
  font:10pt Georgia;
}


.usual div a { color:#000; font-weight:bold; }

#usual2 { background:#0A0A0A; border:1px solid #1A1A1A; }
#usual2 a { background:#222; }
#usual2 a:hover { background:#000; }
#usual2 a.selected { background:snow; }
#tabs3 { background:#FF9; }

/* Style for various uses of tabs */

#freedom {
  float:left;
  width:90px;
  color:#68D;
  font:1.3em Cambria, Times New Roman, serif;
  font-style:italic;
}
#freedom li a {
  width:80px;
  text-align:left;
  padding:2px 6px 4px;
  background:#222;
  margin:1px;
  margin:0px;
  display:block;
  text-decoration:none;
  font-weight:bold;
  font-size:0.7em;
  font-style:normal;
}
#freedom li a:hover {
  background:#0A0A0A;
  width:86px;
}
#freedom li a.selected {
  background:#FFF;
  color:#000;
  width:90px;
  cursor:default;
}

.tabContainer {
  width:400px;
  margin:20px auto;
  padding-top:2px;
  background:#181818;
  border:1px solid #222;
}
.tabContainer h3 {
  padding-bottom:4px;
  color:#F60;
}
.tabContainer p {
  padding:2px 12px 10px;
  text-align:left;
}

#three {
  position:absolute;
  top:0;
  left:0;
  border-bottom:1px solid #444;
  border-right:1px solid #444;
}

#four {
  color:#D66;
  font:2em Cambria, Times New Roman, serif;
  position:fixed;
  bottom:10px;
  right:20px;
}

.imagebox {
  background:#040404;
  border:1px solid #1A1A1A;
  width:100px;
  height:90px;
  margin:10px auto;
}
.imagebox a {
  display:block;
  width:25px;
  height:25px;
  line-height:23px;
  float:left;
  text-decoration:none;
  background:#111;
}
.imagebox a:hover { background:#000; }
.imagebox a.selected {
  background:snow;
  color:#222;
  font-weight:bold;
}
.imagebox img { margin-top:6px; clear:both; }


/* Styles for Advanced Section */

#adv2 {
  width:500px;
  margin:6px auto;
  background:#181818;
}
#adv2 ul {
 display:block;
 width:50px;
 height:50px;
 float:left;
}
#adv2 li { float:left; }
#adv2 li.split { clear:both; }
#adv2 li a {
  display:block;
  height:25px;
  width:25px;
  line-height:22px;
  text-decoration:none;
  background:#222;
}
#adv2 li a:hover {
  background:#0A0A0A;
}
#adv2 li a.selected {
  background:snow;
  color:#111;
  font-weight:bold;
}

#adv2 span {
  height:50px;
  display:block;
  line-height:45px;
  width:450px;
  float:right;
  background:#181818;
}

#adv3 a {
  color:snow;
  font-size:2em;
  font-weight:bold;
  text-decoration:none;
  margin:6px;
}
#adv3 a:hover { color:#68D; }
#adv3 p {
  color:#888;
  margin:5px;
  font-style:italic; 
}
#adv3 p a {
  margin:0;
  color:#CCC;
  font-size:1em;
  font-weight:bold;
  text-decoration:underline;
}
#adv3 p a:hover { color:#FFF; }

#message {
  margin:10px auto;
  border:6px solid #222;
  width:240px;
  height:40px;
  background:#0D0D0D;
  font-size:1.3em;
  line-height:2em;
  color:#FC4;
}


首现你要明白问题所在!然后在解决!

建议不要用控件!或者换个更好的TAB --------------------编程问答-------------------- 这个应该很简单...

默认的情况下是tab1当你执行后台事件就说明刷新了.tab1也就不存在了..

所以 后台代码执行完毕之后 在输出个函数就OK了


$("#usual2 ul").idTabs("tabs2");  

实际上输出这个东西就可以了
你可以

string cmd="$("#usual2 ul").idTabs("tabs2");";
.ClientScript.RegisterStartupScript(page.GetType(), "", cmd);


祝你成功.

--------------------编程问答-------------------- 既然你用到了刷新,那说明代码要从后台执行,可以通过后台来判断显示隐藏 --------------------编程问答--------------------
引用 2 楼 diaodiaop 的回复:
这个应该很简单...

默认的情况下是tab1当你执行后台事件就说明刷新了.tab1也就不存在了..

所以 后台代码执行完毕之后 在输出个函数就OK了


$("#usual2 ul").idTabs("tabs2");  

实际上输出这个东西就可以了
你可以

string cmd="$("#usual2 ul").idTabs("tabs2");";
.ClientScript.RegisterStartupScript(page.GetType(), "", cmd);


祝你成功.


谢谢, 改了试了一下但是不行啊
在网上找了好多都不行。
补充:.NET技术 ,  ASP.NET
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,