选择喜欢的书籍

当点击“我和狗狗一起活下去”按钮时，显示”我和狗狗一起活下去 “书籍；当点击“灰霾来了怎么办”按钮时，显示“灰霾来了怎么办”书籍。效果如下图示：

 首先我们写眼睛可见的内容内容

    <p>选择你喜欢的书：
    <input type="radio" id="one" name="喜欢的书" />
    <label for="one">我和狗狗一起活下来</label>
    <input type="radio" id="two" name="喜欢的书" />
    <label for="two">灰霾来了怎么办</label>
    </p>

再写两个可以容纳点击过后出现图片和文本的对象

    <img src="" alt="">
    <p id="d1"></p>

css设置只用设置居中就行

    <style>
        body{
            text-align: center;
        }
    </style>

再来安排JS代码区了

    <script>
        //获取全局变量
        var one=document.getElementById("one");
        var two=document.getElementById("two");
        var img=document.querySelector("img")
        var bbb = document.querySelector("#d1");

        //给获取的按钮添加点击事件
        one.onclick=function(){
            img.src="images/dog.jpg";
            bbb.innerHTML="我和狗狗一起活下来"
        }
        two.onclick=function(){
            img.src="images/mai.jpg";
            bbb.innerHTML="灰霾来了怎么办"
        }
    </script>

各位友友可以借鉴和分享，如果有其他更好的方法可以留言评论噢！谢谢