div+css+javascript显示的问题!选择一个下拉列表 老是刷
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link href="Commonality.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Contract.js"></script>
</head>
<body onload="init();">
<form id="form1" runat="server">
<div id="divcenter800">
<div id="TabOnLineDeal" class="TabNotHit">交易 </div>
<div id="TabTransfer" class="TabNotHit">转帐 </div>
<div id="TabModify" class="TabNotHit">变更 </div>
</div>
<div id="OnLineDeal" class="SelectNoteTr">
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
</div>
<div id="Transfer" style="display:none;" class="SelectNoteTr">
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
</asp:DropDownList>
</div>
<div id="Modify" style="display:none;" class="SelectNoteTr">
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True">
<asp:ListItem>7</asp:ListItem>
<asp:ListItem>8</asp:ListItem>
<asp:ListItem>9</asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
css------------
#divcenter800
{
margin-left: auto;
margin-right: auto;
width: 780px;
}
.TabHit
{
float: left;
background-image: url(cordhit.gif);
padding-top: 3px;
text-align: center;
height: 19px;
width: 63px;
}
.TabNotHit
{
text-align: center;
padding-top: 3px;
float: left;
cursor: hand;
height: 19px;
width: 63px;
}
.SelectNoteTr
{
margin-left: auto;
margin-right: auto;
margin-top: 2px;
width: 780px;
padding-top: 0px;
font-family: 宋体;
font-size: 12px;
height: 20px;
}
javascript---------------
function SelectTabNode()
{
var TabOnLineDeal=document.getElementById("TabOnLineDeal");
TabOnLineDeal.className="TabNotHit" ;
var TabTransfer=document.getElementById("TabTransfer");
TabTransfer.className="TabNotHit" ;
var TabModify=document.getElementById("TabModify");
TabModify.className="TabNotHit" ;
this.className="TabHit";
var OnLineDeal=document.getElementById("OnLineDeal");
OnLineDeal.style.display="none";
var Transfer=document.getElementById("Transfer");
Transfer.style.display="none";
var Modify=document.getElementById("Modify");
Modify.style.display="none";
document.getElementById(this.id.replace('Tab','')).style.display="";
}
function init()
{
var TabOnLineDeal=document.getElementById("TabOnLineDeal");
TabOnLineDeal.onclick=SelectTabNode;
var TabTransfer=document.getElementById("TabTransfer");
TabTransfer.onclick=SelectTabNode;
var TabModify=document.getElementById("TabModify");
TabModify.onclick=SelectTabNode;
}
这个层显示的已经ok了!现在最大的问题就是当我选择一个层下面的一个下拉列表里面的值(我设置了AutoPostBack="True" 这个一定要)
这个页面就老刷回去: 比如选择(转帐)下面的 DropDownList2 的值 页面就又回到(交易)这层了
我现在就是想要我选择任何一层下的DropDownList 的值 页面都不动
谢谢高手提点!!!!
<head runat="server">
<title>无标题页</title>
<link href="Commonality.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Contract.js"></script>
</head>
<body onload="init();">
<form id="form1" runat="server">
<div id="divcenter800">
<div id="TabOnLineDeal" class="TabNotHit">交易 </div>
<div id="TabTransfer" class="TabNotHit">转帐 </div>
<div id="TabModify" class="TabNotHit">变更 </div>
</div>
<div id="OnLineDeal" class="SelectNoteTr">
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
</div>
<div id="Transfer" style="display:none;" class="SelectNoteTr">
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
</asp:DropDownList>
</div>
<div id="Modify" style="display:none;" class="SelectNoteTr">
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True">
<asp:ListItem>7</asp:ListItem>
<asp:ListItem>8</asp:ListItem>
<asp:ListItem>9</asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
css------------
#divcenter800
{
margin-left: auto;
margin-right: auto;
width: 780px;
}
.TabHit
{
float: left;
background-image: url(cordhit.gif);
padding-top: 3px;
text-align: center;
height: 19px;
width: 63px;
}
.TabNotHit
{
text-align: center;
padding-top: 3px;
float: left;
cursor: hand;
height: 19px;
width: 63px;
}
.SelectNoteTr
{
margin-left: auto;
margin-right: auto;
margin-top: 2px;
width: 780px;
padding-top: 0px;
font-family: 宋体;
font-size: 12px;
height: 20px;
}
javascript---------------
function SelectTabNode()
{
var TabOnLineDeal=document.getElementById("TabOnLineDeal");
TabOnLineDeal.className="TabNotHit" ;
var TabTransfer=document.getElementById("TabTransfer");
TabTransfer.className="TabNotHit" ;
var TabModify=document.getElementById("TabModify");
TabModify.className="TabNotHit" ;
this.className="TabHit";
var OnLineDeal=document.getElementById("OnLineDeal");
OnLineDeal.style.display="none";
var Transfer=document.getElementById("Transfer");
Transfer.style.display="none";
var Modify=document.getElementById("Modify");
Modify.style.display="none";
document.getElementById(this.id.replace('Tab','')).style.display="";
}
function init()
{
var TabOnLineDeal=document.getElementById("TabOnLineDeal");
TabOnLineDeal.onclick=SelectTabNode;
var TabTransfer=document.getElementById("TabTransfer");
TabTransfer.onclick=SelectTabNode;
var TabModify=document.getElementById("TabModify");
TabModify.onclick=SelectTabNode;
}
这个层显示的已经ok了!现在最大的问题就是当我选择一个层下面的一个下拉列表里面的值(我设置了AutoPostBack="True" 这个一定要)
这个页面就老刷回去: 比如选择(转帐)下面的 DropDownList2 的值 页面就又回到(交易)这层了
我现在就是想要我选择任何一层下的DropDownList 的值 页面都不动
谢谢高手提点!!!!
...全文
相关推荐
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
CSS+JS实现一个DIV层的展开折叠效果
CSS+JS实现一个DIV层的展开折叠效果,自己总结出来的,两天才解决的问题,分享出来,大家项目学习,交流。欢迎评论、指导
JS+CSS实现DIV层的展开、收缩效果
主要介绍了JS+CSS实现DIV层的展开、收缩效果,以两个完整实例介绍了JS控制DIV层的展开、收缩效果,感兴趣的小伙伴们可以参考一下
JS+DIV+CSS实现仿表单下拉列表效果
本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
CSS+JS实现DIV蒙板效果
NULL 博文链接:https://yoyo990dl.iteye.com/blog/1974751


