javascript - 容器 DIV 显示设置为无然后返回内联后 DIV onclick 不起作用

Question

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

第一个代码按设计......第二个代码没有隐藏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>

谢谢你..

score 0 · Accepted Answer

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

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

//your code here 

});

检查详细信息：链接

javascript - 容器 DIV 显示设置为无然后返回内联后 DIV onclick 不起作用

1 回答 1

Related

Reference