图片显示与隐藏

dingdot 2012-03-28 11:17:40



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>显示隐藏图片</title>

<script type="text/javascript">

		

		

	function none_b2(){

		document.getElementById("b2").style.display="none";

	}

	

	function block_b2(){

			document.getElementById("b2").style.display="block";

		/*  document.getElementById("b2").style.float="left"; */

	}



</script>

</head>



<body>

	<img src="images/book1.jpg" alt="book1" id="b1" />

    <img src="images/book2.jpg" alt="book2" id="b2" />

    <img src="images/book3.jpg" alt="book3" id="b3" />

    <br/>



    <input name="btn2" type="button" value="display隐藏图片b2" onclick="none_b2()" />

    



    <input name="btn4" type="button" value="display显示图片b2" onclick="block_b2()" />



</body>

</html>

初学js,遇到这个问题，有三个图片book1,book2,book3并排放在页面上。
点击“display隐藏图片b2”这个按钮时，book2图片实现隐藏，book3占据book2的位置
现在想要实现点击"display显示图片b2"这个按钮时，图片book2显示出来，并且要恢复book2之前所在的位置，也就是说book3要后退一个位置，空出来的位置显示book2

需要实现如示列图所示：

初始位置
Book1 Book2 Book3

点击“display隐藏图片b2”这个按钮后
Book1 Book3

点击"display显示图片b2"这个按钮后，显示
Book1 Book2 Book3

但是按上面的脚本运行的话
初始位置和点击“display隐藏图片b2”这个按钮后显示的都是一样的。
点击"display显示图片b2"这个按钮后，显示
Book1
Book2
Book3

分了三行显示了

如果在block_b2中，加入document.getElementById("b2").style.float="left";这行代码，则显示的时候，虽然book2可以跟book1,book3显示在同一行，但是boo2会出现在首位。

这个javascript代码要怎么改呀。别让我重新加载页面呀

...全文

288 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

惊了时光丨绿了芭蕉 2012-03-29

打赏
举报

[Quote=引用 4 楼的回复:]

to ZhiZhuoChangeIng：
换行符这个词用的有点问题，不过意思我相信是没理解错~

块级元素和内联元素都是布局的一些基础。有必要理清。另外类似的还有
padding与margin
display与visible等。
[/Quote]

额，受教了。 cj205

Mr-Jee 2012-03-28

打赏
举报

to ZhiZhuoChangeIng：
换行符这个词用的有点问题，不过意思我相信是没理解错~

块级元素和内联元素都是布局的一些基础。有必要理清。另外类似的还有
padding与margin
display与visible等。

惊了时光丨绿了芭蕉 2012-03-28

打赏
举报

惊了时光丨绿了芭蕉 2012-03-28

打赏
举报

[Quote=引用楼主的回复:]
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equi……
[/Quote]

LZ，你这里写错了：

function block_b2(){
document.getElementById("b2").style.display="block";
/* document.getElementById("b2").style.float="left"; */
}

应该改成：

function block_b2(){
document.getElementById("b2").style.visibility="hidden";
/* document.getElementById("b2").style.float="left"; */
}

001007009 2012-03-28

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>显示隐藏图片</title>

<script type="text/javascript">

        

        

    function none_b2(){

        document.getElementById("b2").style.display="none";

    }

    

    function block_b2(){

            document.getElementById("b2").style.display="inline";

        /*  document.getElementById("b2").style.float="left"; */

    }



</script>

</head>



<body>

    <img src="images/book1.jpg" alt="book1" id="b1" />

    <img src="images/book2.jpg" alt="book2" id="b2" />

    <img src="images/book3.jpg" alt="book3" id="b3" />

    <br/>



    <input name="btn2" type="button" value="display隐藏图片b2" onclick="none_b2()" />

    



    <input name="btn4" type="button" value="display显示图片b2" onclick="block_b2()" />



</body>

</html>