在想出一种无需重新加载页面的情况下更新部分文本的方法时，我遇到了很多麻烦。当您单击其中一个选项卡时，我希望代码执行的操作是更新部分(下面的 id="section2")中的文本和图片。
当您单击其中一个选项卡时，我希望页面执行的操作是从本地 .txt 文件加载文本(将来也加载 .jpg)。截至目前，changeText 函数会更新文本，但仅当您手动输入文本时才会更新。
根据我下面的代码，这是可行的:
$('#section-text').html("文本1的测试");
但我想做的是从名为“text1.txt”的 .txt 文件中加载文本
$('#section-text').html("text1.txt");
我刚刚开始涉足 Web 编程，所以我对 JavaScript 和 JQuery 的经验很少，所以我在下面展示的大部分内容都是来自其他站点的反复试验。我尝试了很多我在网上找到的其他方法，但收效甚微。到目前为止，这是我最接近理想的解决方案，但我发现如果我只是复制并粘贴我的文本，它会丢失格式。
如有任何帮助，我们将不胜感激。如果人们对清理某些代码有任何建议，我们也将非常欢迎。
这是我的 HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Test Page">
<title>Test Page</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function changeText(text){
if (text == 'Example 1'){
$('#section-text').html("test of text1");
$('#section-pic').html("images/slide1.jpg");
}
if (text == 'Example 2'){
$('#section-text').html("Change the text");
$('#section-pic').html("images/slide2.jpg");
}
if (text == 'Example 3'){
$('#section-text').html("Something new here");
$('#section-pic').html("images/slide3.jpg");
}
}
</script>
</head>
<div class="nav">
<link rel="stylesheet" href="css/styles.css">
<ul>
<li id="Example 1" onClick="changeText('Example 1');"><a>Example 1</a></li>
<li id="Example 2" onClick="changeText('Example 2');"><a>Example 2</a></li>
<li id="Example 3" onClick="changeText('Example 3');"><a>Example 3</a></li>
</ul>
</div>
<div id="section2" class="section2" align="center">
<div id="section-text" class="section-text">
<iframe src="des/text1.txt" style="overflow:hidden" width ="90%"; height="90%" seamless="seamless" scrolling="no" frameBorder="0"></iframe>
</div>
<div id="section-pic" class="section-pic">
<span class="Centerer"></span>
<img class="Centered" src="images/slide1.jpg" style="height:75%; width:90%"/>
</div>
</div>
</html>
CSS:
<style>
#header {
background-color:#083266;
color:white;
text-align:center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
#section2 {
width:100%;
background-color:grey;
padding-top:25px;
padding-bottom:25px;
height: 10cm;
}
.section-text {
width:60%;
float:right;
background-color:grey;
padding-top:25px;
padding-bottom:25px;
text-align:center;
}
.section-pic {
background-color:grey;
width: 40%;
float:left;
text-align:center;
}
.Centerer {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Centered {
display: inline-block;
vertical-align: middle;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 10px;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
width = 100px
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
</style>
AJAX 尝试:
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
function loadFile() {
reader.open('GET', 'text1.txt', true);
reader.onreadystatechange = displayContents;
reader.send(null);
}
function displayContents() {
if(reader.readyState==4) {
var el = document.getElementById('page_content');
el.innerHTML = reader.responseText;
}
}
更新 - 我的解决方案:
对于那些遇到与我相同问题的人，这是我使用的解决方案。经过大量搜索和询问后，我在我的 css 文件中使用了显示选项。因此，将以下内容添加到您的 css 文件中:
.hidden { display: none; }
.unhidden { display: block; }
在我的例子中，我想通过单击每个选项卡来更新一些文本和图片，所以我将以下脚本添加到我的 html 中:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function unhide(divID,divID2) {
$(".unhidden").each(function() {
$(this).removeClass("unhidden").addClass("hidden");
});
//change text
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
//change the images
var item = document.getElementById(divID2);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
这是我使用的 html 脚本:
<div class="section2" align="center">
<div class="nav">
<link rel="stylesheet" href="css/styles.css">
<ul>
<li> <a href="javascript:unhide('Text1','Pic1');"> Example 1 </a></li>
<li> <a href="javascript:unhide('Text2','Pic2');"> Example 2 </a></li>
</ul>
</div>
<div class="section-text">
<div id="Text1" class="unhidden">
<p> Text for Example 1 </p>
</div>
<div id="Text2" class="hidden">
<p> Add your text here for Text 2 </p>
</div>
</div>
<div class="section-pic">
<div id="Pic1" class="unhidden">
<span class="Centerer"></span>
<img class="Centered" src="images/pic1.jpg" style="height:auto; width:auto"/>
</div>
<div id="Pic2" class="hidden">
<span class="Centerer"></span>
<img class="Centered" src="images/pic2.jpg" style="height:auto; width:auto"/>
</div>
</div>
</div>
最佳答案
您需要做很多事情。以下是一个模型，可帮助您了解如何从外部文件中获取文本。由于您更多地关注配置方法，我建议使用 xml 文件而不是文本(但选择取决于您)。
// Register click event for every 'li' element
$('li').click(function()
{
var response = '';
// grab the id of the 'li' for lookup
var value = $(this).attr("id");
$.ajax({
url: "https://url/xml/test.xml", // Check for the structure below
dataType: "xml",
success: function(data) {
xmlDoc = $.parseXML(data);
$(xmlDoc).find("id").each(function ()
{
if($(this).text() == value)
{
$("#section-text").text($(this).find("title").text());
$(".Centered").attr("src",$(this).find("title").text());
}
});
}
});
});
// structure of text file as xml
"<id>Example1<title>Text Of Example 1</title><img>images/example1Image.img</img></id><id>Example2<title>Text Of Example 2</title><img>images/example2Image.img</img></id>",
http://jsfiddle.net/gcfLso5s/4/
我还建议阅读一些关于 jquery 和 ajax 的文章，以加深对其工作原理的理解。
如果您有任何问题，请告诉我。
关于javascript - 如何编写 HTML 页面以在单击按钮时更新从文本文件导入的文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33131949/