隐藏并显示内容

Question

这里是另一个类似于我昨天问过的脚本，这个脚本完全适用于我想要的内容，除了我希望默认显示其中一个内容项目，然后替换为另一个内容项目当选择。

$(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的显示：块：

$(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; 
 
} 
 

 
.default { 
 
    display: block 
 
} 
 

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

<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>