このスクリプトを使用すると、他のテキストをクリックするとdivのテキストを変更できます。4つの異なるテキストがあり、他の4つのテキストをクリックしてdivのテキストを変更したいのですが、問題は私も次のリンクをクリックしたときに前のテキストを表示します。前のテキストをクリアして新しいテキストのみを表示したいです。添付スクリプトとHTMLを見つけて、助けてください。さらに質問がある場合はお知らせください。
<script type="text/javascript">
$(document).ready(function() {
$("#changeText1").click(function() {
$("#textBox1").html("My text is changed1!");
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeText").click(function() {
$("#textBox").html("My text is changed!");
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeText2").click(function() {
$("#textBox2").html("My text is changed!2");
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeText3").click(function() {
$("#textBox3").html("My text is changed!3");
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeText5").click(function() {
$("#textBox5").html("My text is changed5!");
});
});
</script>
これはhtmlです
<ul class="tabs">
<li><a href="#" id="changeText">inclusive</a></li>
<li><a href="#" id="changeText2">Hotel</a></li>
<li><a href="#" id="changeText3">Car</a></li>
<li class="end"><a href="#" id="changeText5">Cruise</a></li>
</ul>
<div class="tabs_cont">
<div id="textBox3" style="color:#FFF"></div>
<div id="textBox" style="color:#FFF"></div>
<div id="textBox1" style="color:#FFF"></div>
<div id="textBox2" style="color:#FFF"></div>
<div id="textBox5" style="color:#FFF"></div>
</div>
<div id="textBox4" style="color:#FFF"></div>