JS点击按钮显示隐藏层问题

JavaScript013

JS点击按钮显示隐藏层问题,第1张

if(obj!=document.getElementById("divOne_1"))

{

document.getElementById("divOne_1").style.display="none"

}

最傻瓜的方式,在

click_a

函数内增加一个判断,如果obj不是divOne_1的话,则对obj则将divOne_1进行隐藏。

序说明:

要实现一个简单的LightBox效果,主要有两个部分:覆盖层和高亮层。

【跨浏览器的固定定位】

首先要先说说这个东西position:fixed,它的作用是跨浏览器的固定定位。

摘自详解定位与定位应用:

“如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。”

程序中很多地方利用了这个css,ie7、ff都支持这个css,但ie6不支持,程序中只能是在ie6模拟这个效果。

【覆盖层】

覆盖层的作用是把焦点限制在高亮层上,原理是通过一个绝对定位的层(通常使用div),设置它的宽度和高度以致能覆盖整个屏幕(包括缩放和滚动浏览器的情况下),再给它设置一个比较高的zIndex来层叠在原有内容之上(但要比高亮层小),这样用户就只能点到这个层之上的内容了。

代码这样呀:

<html>

<head>

<script>

$(document).ready(function() {

/********* tab setting *********/

$(".tab td:first").addClass("current")

$(".tab div:not(:first)").hide()

/********* tab event *********/

$(".tab td").click(function() {

$(".tab td").removeClass("current")

$(this).addClass("current")

$(".tab div").hide()

$("." + $(this).attr("id")).fadeIn('slow')

})

$("#linkFSS").click(function(){

$("#tab7").click()

})

})</script>

</head>

<body>

<div class="tab">

<table>

<tr>

<td id="tab1">租房</td>

<td id="tab2">学生宿舍</td>

</tr>

</table>

<div class="tab1">租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房

</div>

<div class="tab2">学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍

</div>

</div>

</body>

<html>

<html>

<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$(function()

{

$("div").css("display","none")

$("h1").click(function(){

var obj=$(this).next("div")

$(obj).show("fast")

$(obj).siblings("div").each(function(){$(this).hide()})

})

})

</script>

<style type="text/css">

#panel

{

border:1px

border-color:green

border-style:double

background-color:#F0F8FF

cursor:pointer

width:100px

height:100px

}

</style>

</head>

<body>

<h1>gdgdg</h1>

<div id="1"><p>ffffffffsfsffffffffjsfojsofjsofjsofjs</p></div>

<h1>dgdgd</h1>

<div id="2"><p>afafa<br>fsfsfsfsfsfs</p></div>

<h1>hfhfhf</h1>

<div id="3"><p>fffsfsfssssssssssssssssssssssssssssssssssfffffffff</p></div>

</body>

</html>

因为span1的display原始属性是block,所以打开页面会显示span1的内容。选择不同单选按钮时,会调用不同的js方法,改变各个span的display值,来控制显示不同的内容。