切换图片样式
预设一个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
版权所有，转载请注明源地址
-------------------------------------------------------------------------------------------------
