切换图片样式

2020-04-24 13:06:55 阅读：165 来源： 互联网

标签：function img 样式 type switch 切换 active border 图片

预设一个2像素的透明框线，否则图片点击后边框会变形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fileinput</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/zh.js"></script>
    <style type="text/css">
        div.img_switch {
            z-index: 2;
            background-color: #fff;
            display: inline-block;
            border-radius: 4px;
        }

        .img_switch a {
            display: inline-block;
            text-align: center;
            text-decoration: none;
            padding-left: 0;
        }
        .img_switch img {
            width: 100px;
            height: 100px;
        }

        .img_switch a.active img {
            border: 2px solid #4185d0;
        }

        a#img_type,a#img2_type {
            border: 2px solid transparent;  /*预设一个2像素的透明框线，否则图片点击后边框会变形*/
            margin-top: 2%;
            margin-bottom: -4%;
        }
    </style>
    <script>
        $(function () {
            /*切换按钮绑定*/
            $(".img_switch a").click(function(){
                $(this).addClass("active").siblings().removeClass("active");
                switchImg($(this).attr("id"));
            });
            /*切换*/
            function switchImg(imgName) {
                if(imgName == 'img2_type'){

                }else {

                }
            }
        });

    </script>
</head>
<body>
    <div class="img_switch">
        <a  id="img_type" class="active" style=""><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1397212089,2156075829&fm=26&gp=0.jpg"></a>
        <a  id="img2_type" style=""><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1127089551,1776911506&fm=26&gp=0.jpg"></a>
    </div>
</body>
</html>

标签：function,img,样式,type,switch,切换,active,border,图片
来源： https://www.cnblogs.com/yiliangmi/p/12766744.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

切换图片样式