使用这个脚本我可以更改div中的文本点击其他文本..我有四个不同的文本和一个Div我想通过点击其他四个文本更改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>
答案 0 :(得分:1)
您无需使用单独的script
代码和$(document).ready
来注册每个点击事件。这一切都可以完成一次。
更好的解决方案是为所有标签使用一个div
,但如果您想保留所有div,则以下代码应该有助于解决问题:
<script type="text/javascript">
$(document).ready(function() {
$("#changeText1").click(function() {
$('.tabs_cont div').empty();
$("#textBox1").html("My text is changed1!");
});
$("#changeText").click(function() {
$('.tabs_cont div').empty();
$("#textBox").html("My text is changed!");
});
$("#changeText2").click(function() {
$('.tabs_cont div').empty();
$("#textBox2").html("My text is changed!2");
});
$("#changeText3").click(function() {
$('.tabs_cont div').empty();
$("#textBox3").html("My text is changed!3");
});
$("#changeText5").click(function() {
$('.tabs_cont div').empty();
$("#textBox5").html("My text is changed5!");
});
});
</script>
答案 1 :(得分:0)
在设置新文本之前尝试清除元素:
<script type="text/javascript">
$(document).ready(function() {
$("#changeText2").click(function() {
$("#textBox2").empty().html("My text is changed!2");
});
});
</script>
答案 2 :(得分:0)
试试这个:
<script type="text/javascript">
$(document).ready(function() {
$("#changeText1").click(function() {
$("#textBox1").text("My text is changed1!");
});
});
</script>
答案 3 :(得分:0)
我假设没有理由你有几个div。当你声明你只想写一个div时。所以问题是你要写几个div而不是一个。如果这不是你想要的,请纠正我。
我还删除了你的几个脚本标签和文本框,因为它们是不必要的 - 至少在这个例子中。
<强> 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="textBox" ></div>
</div>
<div id="textBox4" style="color:#FFF"></div>
<强>使用Javascript:强>
$(document).ready(function() {
$("#changeText").click(function() {
$("#textBox").text("My text is changed!");
});
$("#changeText2").click(function() {
$("#textBox").text("My text is changed!2");
});
$("#changeText3").click(function() {
$("#textBox").text("My text is changed!3");
});
$("#changeText5").click(function() {
$("#textBox").text("My text is changed5!");
});
});
编辑:忘记保存JSFiddle ..现在这很傻。
答案 4 :(得分:0)
如果这是你想要的,我不能100%确定。但请留言,我会更新。这是一个智能选择结构,可以取消您在代码中创建的所有双重内容。
尝试只使用就绪状态一次,它更清洁:
<强> HTML 强>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body>
<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" style="background-color: black;">
<div id="textBox3" style="color:#FFF">3</div>
<div id="textBox" style="color:#FFF">0</div>
<div id="textBox1" style="color:#FFF">1</div>
<div id="textBox2" style="color:#FFF">2</div>
<div id="textBox5" style="color:#FFF">5</div>
</div>
<div id="textBox4" style="color:#FFF"></div>
</body>
</html>
<强> main.js 强>
'use strict';
$(document).ready(function(){
$('.tabs [id^="changeText"]').click(function(){
var index = $(this).attr('id').split('changeText')[1];
var backup_html = $('.tabs_cont #textBox' + index).html();
// These are all the textboxes you want to match
$('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)
// This HTML selector is the same as the one you clicked "changeText"
$('.tabs_cont #textBox' + index).html('My text has changed: ' + (index == 0 ? 0 : index) + ': ' + $(this).html());
});
});
HTML中的 style="background-color: black;"
仅用于测试目的:)
的更新强> 的
根据OP的请求新main.js
:
'use strict';
$(document).ready(function(){
$('.tabs [id^="changeText"]').click(function(){
var index = $(this).attr('id').split('changeText')[1];
var new_html = 'My text has changed: ';
switch(index) {
case '':
new_html += 'Text for 0';
break;
case '1':
new_html += 'Text for 1';
break;
case '2':
new_html += 'Text for 2';
break;
case '3':
new_html += 'Text for 3';
break;
case '4':
new_html += 'Text for 4';
break;
case '5':
new_html += 'Text for 5';
break;
}
// These are all the textboxes you want to match
//$('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)
// This HTML selector is the same as the one you clicked "changeText"
$('.tabs_cont #textBox' + index).html(new_html);
});
});
第二个变体,使用更清晰的地图选择器
'use strict';
$(document).ready(function(){
$('.tabs [id^="changeText"]').click(function(){
var index = $(this).attr('id').split('changeText')[1];
var new_html = {
'' : 'Text for 0',
'1' : 'Text for 1',
'2' : 'Text for 2',
'3' : 'Text for 3',
'4' : 'Text for 4',
'5' : 'Text for 5',
};
// These are all the textboxes you want to match
//$('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)
// This HTML selector is the same as the one you clicked "changeText"
$('.tabs_cont #textBox' + index).html('My text has changed: ' + new_html[index]);
});
});