2つの異なる画像を切り替えるにはどうすればよいですか？

Question

ブートストラップで2つの異なる画像を切り替えるにはどうすればよいですか？私はそれらをラジオボタンとして機能させたいが、イメージを変更して1つが「アクティブ」であり、1つがそうでないことを示すことも欲しい。

マイページ：http://matthewtbrown.com/test/imageasbutton/

コードスニペット

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

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

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

 
    .btn .btn-primary .alltime { 
 
\t padding: 0px; 
 
\t border-left-width: 0px; 
 
\t border-right-width: 0px; \t 
 
\t border-top-width: 0px; 
 
\t border-bottom-width: 0px; 
 
\t 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>

Answer 1

このコードを試してみて、それはあなたが

$("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>

0探しているものだかどうかを確認してください