js小例子

最新推荐文章于 2023-02-19 22:12:05 发布

小斑马在沙巴找BUG

最新推荐文章于 2023-02-19 22:12:05 发布

阅读量209

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_14954259/article/details/52093543

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" href="css/style.css">
    <link type="javascript" href="js/images.js">
    <title>show images</title>
</head>
<body>
<div id="images">
    <ul id="imagesList">
        <li><a href="1.jpg"  title="第一张图片" οnclick="change(this);return false;">第一张图片</a></li>
        <li><a href="2.jpg"  title="第二张图片" οnclick="change(this);return false;">第二张图片</a></li>
        <li><a href="3.jpg"  title="第三张图片" οnclick="change(this);return false;">第三张图片</a></li>
        <li><a href="4.jpg"  title="第四张图片" οnclick="change(this);return false;">第四张图片</a></li>
        <li><a href="5.jpg"  title="第五张图片" οnclick="change(this);return false;">第五张图片</a></li>
    </ul>
</div>

    <image id="occupied">
        <p id="discription">discription</p>

<script>
    function change(whicpic){
        var occupied=document.getElementById("occupied");//获取占位符对象
        var discription=document.getElementById("discription");//获取占位符对象
        var imagesList=document.getElementById("imagesList");//获取图片列表对象
        var links=document.getElementsByTagName("a");
        var href=whicpic.getAttribute("href");//获取链接的Value值
        var title=whicpic.getAttribute("title");//获取链接的Value值
        occupied.setAttribute("src",href);//strAttribute()方法使用时，注意参数引号问题
        discription.firstChild.nodeValue=title;

    }
</script>
</body>
</html>