Inhalt ausblenden und anzeigen

Question

Hier ist ein weiteres Skript ähnlich dem, das ich gestern gefragt hatte, dieses funktioniert perfekt für das, was ich will, außer ich möchte einen der Inhaltselemente standardmäßig angezeigt haben, und dann durch ein anderes ersetzen wenn ausgewählt.

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

Es ist nicht klar, wenn Sie hart Code Ihres Standardelement gelten sollen. Hier ist eine Lösung, die # 3 default mit einer .default Klasse macht macht die .box Display: Block:

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