切换图片样式 

预设一个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>

　　

 

-------------------------------------------------------------------------------------------------



QQ群：871934478




版权所有，转载请注明源地址                          




-------------------------------------------------------------------------------------------------








            

            
posted @ 
2020-04-24 12:52 
一两米 
阅读(193) 
评论(0) 
 
收藏 
举报