使用css和jquery

Question

＆＃13;

＆＃13;

$('img').click(function() {
  $('.selected').removeClass('selected');
  $(this).addClass('selected');
});

＆＃13;

img {
  border: solid 1px red;
  margin: 10px;
}
.selected {
  background-color: yellow;
  box-shadow: 0px 12px 22px 1px #333;
}
.image-rounded {
border-radius: 6px;
width: 140px;
height: 140px;
}

.well {
width: 100%;
}

.scroll {
width: 100%;
overflow: auto;
white-space: nowrap;
}

.scroll a {
display: inline-block;
width: 140px;
margin: 10px;
}

.scroll a img {
width: 100%;
}

.scroll a:focus {
border: 1px solid yellow;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="well">
  <div class="scroll">
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我在一个页面中有多个图像可由用户选择。用户只需单击该图像即可选择任何图像。如何在选择后突出显示该图像。如何使用css或jquery突出显示所选图像

点击图片时，我会看到黄色轮廓。点击图片时应显示阴影，直到我转移到下一张图片。

Answer 1

使用toggleClass('className')功能突出显示所选图像。以下是工作版本。

$('img').click(function() {
  //New Code replaced here
  $(this).toggleClass('selected');
});

img {
  border: solid 1px red;
  margin: 10px;
}
.selected {
  background-color: yellow;
  box-shadow: 0px 12px 22px 1px #333;
}
.image-rounded {
border-radius: 6px;
width: 140px;
height: 140px;
}

.well {
width: 100%;
}

.scroll {
width: 100%;
overflow: auto;
white-space: nowrap;
}

.scroll a {
display: inline-block;
width: 140px;
margin: 10px;
}

.scroll a img {
width: 100%;
}

.scroll a:focus {
border: 1px solid yellow;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="well">
  <div class="scroll">
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
    <img src='https://cdn4.iconfinder.com/data/icons/miu-shadow-social/48/twitter-128.png' />
  </div>
</div>