图片显示与隐藏


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

解决方案 »

  1.   


    <!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>display: block 是以块状显示，所以就换行了，换成 inline，内联显示
      

  2.   


    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"; */
        }
      

  3.   


    对，1楼说的对，display属性的block是块状元素，此元素前后带换行符。
      

  4.   

    to ZhiZhuoChangeIng：
      换行符这个词用的有点问题，不过意思我相信是没理解错~块级元素和内联元素都是布局的一些基础。有必要理清。另外类似的还有
    padding与margin
    display与visible等。