html - 如何切换两个不同的图像？

如何使用Bootstrap切换两个不同的图像？我希望它们充当单选按钮，但我也希望它们更改图像，以指示一个是“活动的”，另一个不是。

我的页面：http://matthewtbrown.com/test/imageasbutton/

程式码片段

    .btn .btn-primary .active .thisweek   {
	padding: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 0px;
	content:url(../images/thisweek.png);
    }

    .btn .btn-primary .thisweek   {
	padding: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 0px;
	content:url(../images/thisweek_inactive.png);
    }

    .btn .btn-primary .active .alltime   {
	padding: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 0px;
	content:url(../images/thisweek.png);
    }

    .btn .btn-primary .alltime   {
	padding: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-top-width: 0px;
	border-bottom-width: 0px;
	content:url(../images/alltime_inactive.png);
    }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active thisweek">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> <img src="images/thisweek.png" width="108" height="27" style="float: left" alt=""/>
    </label>
    <label class="btn btn-primary alltime">
    <input type="radio" name="options" id="option2" autocomplete="off"><img src="images/alltime_inactive.png" width="259" height="27" alt=""/>
    </label>

    </div>

最佳答案

请尝试此代码，看看它是否是您想要的

$("input:radio[name='options1']").click(function() {
  $(".pic1").toggleClass("show");
  $(".pic2").removeClass("show");
});
$("input:radio[name='options2']").click(function() {
  $(".pic2").toggleClass("show");
  $(".pic1").removeClass("show");
});

.pic1,
.pic2 {
  display: none;
}

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class=" active thisweek">
    <input type="radio" name="options1" autocomplete="on">
  </label>
  <label class=" alltime">
    <input type="radio" name="options2" autocomplete="on">
  </label>
</div>
<div class="row images">
  <div class="col-md-6">
    <img class="pic1" src="https://unsplash.it/200/300/?random" width="100" height="100" alt="" />
  </div>
  <div class="col-md-6">
    <img class="pic2" src="https://unsplash.it/g/200/300" width="100" height="100" alt="" />
  </div>
</div>