Hide and display content

Question

here is another script similar to the one I had asked yesterday, this one works perfectly for what I want, except I would like have one of the content items shown by default, and then replaced with a another one when selected.

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".box").not(targetBox).hide();
    $(targetBox).show();
  });
});

.box {
  color: #4E4E4E;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.pr3 {
  background: #E0E0E0;
}

.pr2 {
  background: #E0E0E0;
}

.pr1 {
  background: #E0E0E0;
}

label {
  margin-right: 15px;
  color: #0C8341;
}

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script>
<div>
  <h3>
    <br><font color="#DE0000">Select News from below</font><br><br>
  </h3>
  <label>
    <input type="radio" name="colorRadio" value="pr3"> 
    4/01/2017<br>
    News 3<hr />
  </label>
  <label>
    <input type="radio" name="colorRadio" value="pr2"> 
    3/01/2016<br>
    News 2<hr />
  </label>
  <label>
    <input type="radio" name="colorRadio" value="pr1"> 
    2/01/2016<br>
    News 1<hr />
  </label>
</div>
<div class="col-lg-7 col-sm-8 featured-work">
  <h2>News</h2>
  <div class="featured-box">
    <div class="featured-box-col1 wow fadeInRight delay-02s"></div>
    <div class="featured-box-col7 wow fadeInRight delay-02s"></div>
    <div class="pr3 box">
      <h3>News 3</h3>
      <p> Here is news 3</p>
    </div>
    <div class="pr2 box">
      <h3>News 2</h3>
      <p> Here is news 2</p>
    </div>
    <div class="pr1 box">
      <h3>News 1</h3>
      <p> Here is news 1</p>
    </div>

Answer 1

目前尚不清楚是否要对默认项进行硬编码。这是一个解决方案，它使＃3默认使用.default类使.box显示：block：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".box").not(targetBox).hide();
    $(targetBox).show();
  });
});

＆＃13;

.box {
  color: #4E4E4E;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.pr3 {
  background: #E0E0E0;
}

.pr2 {
  background: #E0E0E0;
}

.pr1 {
  background: #E0E0E0;
}

.default {
  display: block
}

label {
  margin-right: 15px;
  color: #0C8341;
}

＆＃13;

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

<div>
  <h3><br>
    <font color="#DE0000">Select News from below</font><br><br>
  </h3>
  <label><input type="radio" name="colorRadio" value="pr3"> 4/01/2017
    <br>News 3<hr /></label>
  <label><input type="radio" name="colorRadio" value="pr2"> 3/01/2016
    <br>News 2<hr /></label>
  <label><input type="radio" name="colorRadio" value="pr1"> 2/01/2016
    <br>News 1<hr /></label>
</div>
<div class="col-lg-7 col-sm-8 featured-work">
  <h2>News</h2>
  <div class="featured-box">
    <div class="featured-box-col1 wow fadeInRight delay-02s">
    </div>
    <div class="featured-box-col7 wow fadeInRight delay-02s">
    </div>
    <div class="pr3 box default">
      <h3>News 3</h3>
      <p> Here is news 3</p>
    </div>
    <div class="pr2 box">
      <h3>News 2</h3>
      <p> Here is news 2</p>
    </div>
    <div class="pr1 box">
      <h3>News 1</h3>
      <p> Here is news 1</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;