前端案例：在线相册

最新推荐文章于 2024-06-02 14:15:54 发布

兵叔物联

最新推荐文章于 2024-06-02 14:15:54 发布

阅读量272

点赞数

分类专栏：前端开发demo案例文章标签： javascript 阻止超链接跳转 CSS样式

本文链接：https://blog.csdn.net/ass_dsb/article/details/119839425

版权

前端开发demo案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

测试内容：

1、javascript阻止超链接跳转

2、javascript触发事件以及更改样式表

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #ababab;
        }
        .main{
            width:1080px ;
            margin: 0 auto;
        }
        .main2, ul {
            position: relative;
            left: 50%;
            top: 10px;
            margin-left: -400px;
        }
       ul li{
            display: inline-block;
            margin-left: 20px;
            list-style: none; //去掉小点
        }
        .tuwen{
            font: 25px;
            color: #666666;
            background-color: #ababab;
            position: relative;
            left: 50%;
            margin-left: -400px;
        }
        .bigimg{
            font: 40px;
            color: #333333;
            background-color: #cccccc;
            text-align: center;
            width: 400px;
            height: 400px;
            line-height: 400px;
            position: relative;
            left: 50%;
            margin-left: -600px;
        }
        a img{
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div  class="main">
        <ul>
            <li><a href="image/1.jpg"><img  src="image/1.jpg"></a></li>
            <li><a href="image/2.jpg"><img  src="image/2.jpg"></a></li>
            <li><a href="image/3.jpg"><img  src="image/3.jpg"></a></li>
            <li><a href="image/4.jpg"><img  src="image/4.jpg"></a></li>
            <li><a href="image/5.jpg"><img  src="image/5.jpg"></a></li>
            <li><a href="image/6.jpg"><img  src="image/6.jpg"></a></li>
        </ul>
        <div class="main2">
            <div class="tuwen">图片详情</div>
            <img src="image/1.jpg" class="bigimg" id="big">
        </div>
        <script>
            var arry = document.getElementsByTagName("a");
            for(var i=0; i<arry.length; i++)
            {
                arry[i].onclick = function (){
                   document.getElementById("big").src = this.href;
                    return  false;
                }
            }
        </script>
    </div>
</body>
</html>

需要注意事项：

在循环中给big类名标签赋值的是a标签的href，这里只能通过this指针去赋值，不能通过arry[i].href进行赋值

兵叔物联

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端案例：在线相册

测试内容： 1、javascript阻止超链接跳转 2、javascript触发事件以及更改样式表效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ ma...
复制链接

扫一扫