- 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-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代码要怎么改呀。别让我重新加载页面呀
------解决方案--------------------
- 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-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>
------解决方案--------------------