在容器DIV显示设置为无后再返回内联后，DIV onclick无法正常工作

时间：2013-11-13 07:04:55

标签： javascript

我创建了一个我遇到问题的页面的迷你版本;正如我所做的那样，尽可能多地删除可能导致问题的代码。

设计的第一个代码....没有隐藏Day DIV的第二个代码和用于更改显示状态的javascript注释掉了。点击该月的日历日应该会带您到那天预定的约会。然后在接下来的几天点击回到几个月，可以带你回到那天约会的日期选项卡。

第一个不起作用的代码在Apache错误日志或浏览器Javascript控制台中不会引发任何错误。

第一个代码示例：

  <head>
<style type="text/css">
/*************************************************************************
******** Page ************************************************************
*************************************************************************/
.Tab
{
  position: relative;
}
.TabBttn
{
  height: 30px;
  width: 100px;
  background-color: #4DCBEF;
  color: #000000;
  text-align: left ;
}
.TabBttn:hover
{
  background-color: #85FFD6;
}
.TabBttn:focus
{
  background-color: #85FFD6;
}
.CurBttn
{
  height: 30px;
  width: 100px;
  background-color: #EBF0FA;
  color: #470047;
  font-weight: bold;
  text-align: left ;
}
#C_Debug
{
  border: 1px solid;
  float: right;
  max-height: 800px;
  padding: 6px 12px 0 0;
  overflow: auto;
  width: 500px;
  display: none;
}

/*************************************************************************
******** Month ***********************************************************
*************************************************************************/
.CalendarDIV
{
  float: left;
  padding: 0 8px;
}
.Mnth
{
  background-color: #6699FF;
  color: #000;
  font-family: impact;
  font-size: 1.1em;
  padding: 3px 8px;
  text-align: center;
}
.Cell
{
  float: left; 
  border: 1px solid #000;
  padding-top: 2px;
  height: 47px;
  width: 53px;
  font-family: arial;
  font-size: .8em;
  text-align: center;
}
.Head
{
  background-color: #666666;
  color: #FFF;
  font-weight: bold;
}
.Clr
{
  clear: both;
}
.Day
{
  background-color: #fff;
  color: #000 ;
  cursor: pointer;
}
.Not
{
  background-color: #DCE0E0;
}
.Today
{
  background-color: red;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
}
.First
{
  border-color: silver;
  background-color: #005CE6;
  color: #ffffff;
  cursor: pointer;
}
.Last
{
  border-color: silver;
  background-color: #007A00;
  color: #ffffff;
  cursor: pointer;
}
.Open
{
  border-color: silver;
  background-color: #FFFF99;
  color: #000000;
  cursor: pointer;
}
.Closed
{
  border-color: silver;
  background-color: #FF9999;
  color: #000000;
  cursor: pointer;
}
</style>
<script type="text/javascript" >
//====== Main Page ====================================
var aBtn = new Array() ;
var aTab = new Array() ;
var nCur = 0 ;

//====== Day ==========================================
var oMonthCurDay = null ;
var sMonthCurDay = null ;

//====== Day ==========================================
var oDayDate = null ;

window.onload = function ()
{
  //====== Main Page ====================================
  aBtn[ 0 ] = document.getElementById( 'Bttn0'  ) ; 
  aBtn[ 1 ] = document.getElementById( 'Bttn1'  ) ;
  aBtn[ 2 ] = document.getElementById( 'Bttn2'  ) ;
  aBtn[ 3 ] = document.getElementById( 'Bttn3'  ) ;
  aTab[ 0 ] = document.getElementById( 'Months' ) ; 
  aTab[ 1 ] = document.getElementById( 'Day'    ) ;
  aTab[ 2 ] = document.getElementById( 'Claim'  ) ;
  aTab[ 3 ] = document.getElementById( 'New'    ) ;

  //====== Day ==========================================
  oDayDate = document.getElementById( 'DayDate' ) ;
}

//=====================================================
//====== Main Page ====================================
//=====================================================
function Flip( nTab )
{
  if ( nCur != nTab )
  {
    //  Set New Button To Active & Show New Tab
    aBtn[ nTab ].className = 'CurBttn' ;
    aTab[ nTab ].style.display = 'inline' ;

    //  Set Previous Button To Inactive & Hide Previous Tab
    aBtn[ nCur ].className = 'TabBttn' ;
    aTab[ nCur ].style.display = 'none' ;

    nCur = nTab ;
  }
}

//=====================================================
//====== Months =======================================
//=====================================================
function ShowDay( oDay, sDate )
{
  if ( oMonthCurDay != oDay )
  {
    if ( null != oMonthCurDay )
    {
      oMonthCurDay.className = sMonthCurDay ; 
    }

    oMonthCurDay = oDay ;
    sMonthCurDay = oDay.className ;
    oDay.className = 'Cell Open' ;
  }

  Flip( 1 ) ;
  SetDay( sDate ) ;
}

//=====================================================
//====== Day ==========================================
//=====================================================
function SetDay( sDate )
{
  var sYr = sDate.slice(0,4) ;
  var sMn = ( sDate.slice(4,6) ) ;
  var sDy = sDate.slice(-2) ;

  oDayDate.innerHTML = sYr+' '+sMn+' '+sDy
}
</script>
  </head>
  <body>
    <form id="ClientForm" action="" method="post" > <!-- Action & Method Are There For Strict Validation Purposes Only.  Form Is Never To Be Submitted! -->
      <div style="padding: 0 5px; 0; " >
        <div style="clear: both; padding: 6px 0 8px 16px; " >
          <button type="button" class="CurBttn" id="Bttn0" onclick="Flip( 0 );" >Months</button>
          <button type="button" class="TabBttn" id="Bttn1" onclick="Flip( 1 );" >Days</button>
        </div>
        <div class="Tab" id="Months" >
          <div class="CalendarDIV" >
            <div class="Mnth" >November</div>
            <div class="Cell Head" >S</div><div class="Cell Head" >M</div><div class="Cell Head" >T</div><div class="Cell Head" >W</div><div class="Cell Head" >T</div><div class="Cell Head" >F</div><div class="Cell Head" >S</div>
            <div class="Cell Not Clr" ></div>
            <div class="Cell Not" ></div>
            <div class="Cell Not" ></div>
            <div class="Cell Not" ></div>
            <div class="Cell Not" ></div>
            <div id="Date20131101" class="Cell Day" onclick="ShowDay( this, '20131101' );" >1</div>
            <div id="Date20131102" class="Cell Day" onclick="ShowDay( this, '20131102' );" >2</div>
            <div style="clear: both;" ></div>
          </div>
          <div style="clear: both; height: 8px; " ></div>
        </div>
        <div class="Tab" id="Day" style="display: none; " >
          <div style="float: left; padding: 0 6px 0 0;">
            <div id="DayDate" style="padding: 0 0 6px 50px; " >
              &nbsp;
            </div>
            <div class="Doctor" style="background-color: #DBFFFF; " >
              Dr. Finger
            </div>
            <div class="Hours" >
              <div class="Slot0" >
                <div class="Qrtr" ><div class="Time" >07:00</div><div class="Info" >Claim # - Last, First</div></div>
                <div class="Qrtr" ><div class="Time" >07:15</div></div>
                <div class="Qrtr" ><div class="Time" >07:30</div></div>
              </div>
            </div>
          </div>
        </div>
        <div style="clear: both;" ></div>
      </div>
    </form>
  </body>

第二代码示例：

  <head>
<style type="text/css">
/*************************************************************************
******** Page ************************************************************
*************************************************************************/
.Tab
{
  position: relative;
}
.TabBttn
{
  height: 30px;
  width: 100px;
  background-color: #4DCBEF;
  color: #000000;
  text-align: left ;
}
.TabBttn:hover
{
  background-color: #85FFD6;
}
.TabBttn:focus
{
  background-color: #85FFD6;
}
.CurBttn
{
  height: 30px;
  width: 100px;
  background-color: #EBF0FA;
  color: #470047;
  font-weight: bold;
  text-align: left ;
}
#C_Debug
{
  border: 1px solid;
  float: right;
  max-height: 800px;
  padding: 6px 12px 0 0;
  overflow: auto;
  width: 500px;
  display: none;
}

/*************************************************************************
******** Month ***********************************************************
*************************************************************************/
.CalendarDIV
{
  float: left;
  padding: 0 8px;
}
.Mnth
{
  background-color: #6699FF;
  color: #000;
  font-family: impact;
  font-size: 1.1em;
  padding: 3px 8px;
  text-align: center;
}
.Cell
{
  float: left; 
  border: 1px solid #000;
  padding-top: 2px;
  height: 47px;
  width: 53px;
  font-family: arial;
  font-size: .8em;
  text-align: center;
}
.Head
{
  background-color: #666666;
  color: #FFF;
  font-weight: bold;
}
.Clr
{
  clear: both;
}
.Day
{
  background-color: #fff;
  color: #000 ;
  cursor: pointer;
}
.Not
{
  background-color: #DCE0E0;
}
.Today
{
  background-color: red;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
}
.First
{
  border-color: silver;
  background-color: #005CE6;
  color: #ffffff;
  cursor: pointer;
}
.Last
{
  border-color: silver;
  background-color: #007A00;
  color: #ffffff;
  cursor: pointer;
}
.Open
{
  border-color: silver;
  background-color: #FFFF99;
  color: #000000;
  cursor: pointer;
}
.Closed
{
  border-color: silver;
  background-color: #FF9999;
  color: #000000;
  cursor: pointer;
}
</style>
<script type="text/javascript" >
//====== Main Page ====================================
var aBtn = new Array() ;
var aTab = new Array() ;
var nCur = 0 ;

//====== Day ==========================================
var oMonthCurDay = null ;
var sMonthCurDay = null ;

//====== Day ==========================================
var oDayDate = null ;

window.onload = function ()
{
  //====== Main Page ====================================
  aBtn[ 0 ] = document.getElementById( 'Bttn0'  ) ; 
  aBtn[ 1 ] = document.getElementById( 'Bttn1'  ) ;
  aBtn[ 2 ] = document.getElementById( 'Bttn2'  ) ;
  aBtn[ 3 ] = document.getElementById( 'Bttn3'  ) ;
  aTab[ 0 ] = document.getElementById( 'Months' ) ; 
  aTab[ 1 ] = document.getElementById( 'Day'    ) ;
  aTab[ 2 ] = document.getElementById( 'Claim'  ) ;
  aTab[ 3 ] = document.getElementById( 'New'    ) ;

  //====== Day ==========================================
  oDayDate = document.getElementById( 'DayDate' ) ;
}

//=====================================================
//====== Main Page ====================================
//=====================================================
function Flip( nTab )
{
  if ( nCur != nTab )
  {
    //  Set New Button To Active & Show New Tab
    aBtn[ nTab ].className = 'CurBttn' ;
    //aTab[ nTab ].style.display = 'inline' ;

    //  Set Previous Button To Inactive & Hide Previous Tab
    aBtn[ nCur ].className = 'TabBttn' ;
    //aTab[ nCur ].style.display = 'none' ;

    nCur = nTab ;
  }
}

//=====================================================
//====== Months =======================================
//=====================================================
function ShowDay( oDay, sDate )
{
  if ( oMonthCurDay != oDay )
  {
    if ( null != oMonthCurDay )
    {
      oMonthCurDay.className = sMonthCurDay ; 
    }

    oMonthCurDay = oDay ;
    sMonthCurDay = oDay.className ;
    oDay.className = 'Cell Open' ;
  }

  Flip( 1 ) ;
  SetDay( sDate ) ;
}

//=====================================================
//====== Day ==========================================
//=====================================================
function SetDay( sDate )
{
  var sYr = sDate.slice(0,4) ;
  var sMn = ( sDate.slice(4,6) ) ;
  var sDy = sDate.slice(-2) ;

  oDayDate.innerHTML = sYr+' '+sMn+' '+sDy
}
</script>
  </head>
  <body>
    <form id="ClientForm" action="" method="post" > <!-- Action & Method Are There For Strict Validation Purposes Only.  Form Is Never To Be Submitted! -->
      <div style="padding: 0 5px; 0; " >
        <div style="clear: both; padding: 6px 0 8px 16px; " >
          <button type="button" class="CurBttn" id="Bttn0" onclick="Flip( 0 );" >Months</button>
          <button type="button" class="TabBttn" id="Bttn1" onclick="Flip( 1 );" >Days</button>
        </div>
        <div class="Tab" id="Months" >
          <div class="CalendarDIV" >
            <div class="Mnth" >November</div>
            <div class="Cell Head" >S</div><div class="Cell Head" >M</div><div class="Cell Head" >T</div><div class="Cell Head" >W</div><div class="Cell Head" >T</div><div class="Cell Head" >F</div><div class="Cell Head" >S</div>
            <div class="Cell Not Clr" ></div>
            <div class="Cell Not" ></div>
            <div class="Cell Not" ></div>
            <div class="Cell Not" ></div>
            <div class="Cell Not" ></div>
            <div id="Date20131101" class="Cell Day" onclick="ShowDay( this, '20131101' );" >1</div>
            <div id="Date20131102" class="Cell Day" onclick="ShowDay( this, '20131102' );" >2</div>
            <div style="clear: both;" ></div>
          </div>
          <div style="clear: both; height: 8px; " ></div>
        </div>
        <div class="Tab" id="Day" > <!-- style="display: none; " -->
          <div style="float: left; padding: 0 6px 0 0;">
            <div id="DayDate" style="padding: 0 0 6px 50px; " >
              &nbsp;
            </div>
            <div class="Doctor" style="background-color: #DBFFFF; " >
              Dr. Finger
            </div>
            <div class="Hours" >
              <div class="Slot0" >
                <div class="Qrtr" ><div class="Time" >07:00</div><div class="Info" >Claim # - Last, First</div></div>
                <div class="Qrtr" ><div class="Time" >07:15</div></div>
                <div class="Qrtr" ><div class="Time" >07:30</div></div>
              </div>
            </div>
          </div>
        </div>
        <div style="clear: both;" ></div>
      </div>
    </form>
  </body>

谢谢..

1 个答案:

答案 0 :(得分：0)

使用事件委托：  在里面写下你的函数代码：

document.getElementById("id").addEventListener("click",function(e) {    

//your code here 

});

检查详情：link

相关问题
最新问题