隱藏並顯示內容

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>