javascript-設定div隠し

6138 ワード

JavaScript

htmlコード:

<div class="title">

    <ul id="col02_left_title">

    <li><a id="science_danamic" href="#">    </a></li>

    <li><a id="teach_danamic" href="#">    </a></li>

    </ul>

</div>

<div class="content">

    <!--<iframe id="col02_left_content" scrolling="no" target="_parent" class="content_frame" src="content/    .html"></iframe>-->

    <div id="col02_left_content" class="content_frame">

    <div id="science_show" class="dynamic_show">    -  </div>

    <div id="teach_show">    -  </div>

    </div>

</div>

css(displayを隠したら、スペースを占めません.visibilityは占めます):

.dynamic_show {

    display:block;

}

.dynamic_hide {

    display:none;

}

javascript:

function set_danamic() {

    var science_danamic = document.getElementById('science_danamic');

    var science_show = document.getElementById('science_show');



    var teach_danamic = document.getElementById('teach_danamic');

    var teach_show = document.getElementById('teach_show');



    teach_show.className = 'dynamic_hide';



    science_danamic.onmouseover = function () {

    science_show.className = 'dynamic_show';

    teach_show.className = 'dynamic_hide';　　//  className  .

    }

    teach_danamic.onmousemove = function () {

    teach_show.className = 'dynamic_show';

    science_show.className = 'dynamic_hide';

    }

}

最後に、bodyイベントで折り返します.

<body onload="set_danamic()">

(補足):jsはまだ人を陥れているような気がしますが、時々classNameを設置しても機能しないことがあります.ここcssは複雑ではないので、style.display='block'を設定できます.またはstyle.display='none';完成します

javascript親ページの更新方法のまとめ