Art Gallery 2.0

最新推荐文章于 2024-08-08 07:58:00 发布

kitty ball

最新推荐文章于 2024-08-08 07:58:00 发布

阅读量660

点赞数

分类专栏：前端文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_35898776/article/details/53415957

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天终于搞明白之前为什么不能用外部的js文件了src后面接的直接就是外部的地址，不需要加上什么scripts/****之类的
还有引用js的时候js的文件是不需要再加上什么<script>的标签的
辣鸡书籍，毁我青春

html部分

<!DOCTYPE html>                     
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Image</title>    
    <!--
        <script>
                    function showPic(whichpic){
                var source = whichpic.getAttribute("href");
                var placeholder = document.getElementById("placeholder");
                placeholder.setAttribute("src",source);
            }
            </script>
            这是把脚本写在内部的方法
        -->
                <script type="text/javascript" src="showPic.js"></script>
    </head>
    <body >

        <h1>Snashots</h1>
        <ul>
            <li>
                <a href="1518aa12ee9284ce5d45d818364740ac.jpg" onclick="showPic(this);return false;" title="Wine Party">wine</a>
            </li>
            <li>
                <a href="21296024e76ff4f17624bbda7dd4125e.jpeg" onclick="showPic(this);return false;"title="pretty gril">pretty gril</a>
            </li>
            <img id="placeholder" src="images/placeholder.gif" alt="my art gallery"/>   
        </ul>
        <p id = "description">Choose an image.</p>


    </body>
</html>

script部分

        function showPic(whichpic){ 
                var source = whichpic.getAttribute("href");
                var placeholder = document.getElementById("placeholder");
                placeholder.setAttribute("src",source);
                var text = whichpic.getAttribute("title");
                var description = document.getElementById("description"); 
                description.firstChild.nodeValue = text;
            }