Question

我一直在寻找一种方法来更新部分中的文本而无需重新加载页面。我希望代码可以在单击其中一个选项卡时更新文本和部分中的图片（id =＆＃34; section2＆＃34;下面）。

当您单击其中一个选项卡时，我希望页面执行的操作是从本地.txt文件加载文本（以及将来也是.jpg）。截至目前，changeText函数更新文本，但仅在手动输入文本时才更新。

从下面的代码中可以看出：

$（＆＃39;＃section-text＆＃39;）。html（＆＃34;测试text1＆＃34;）;

但我想做的是从名为＆＃34; text1.txt＆＃34;

的.txt文件加载文本

$（＆＃39;＃部文本＆＃39）的HTML。（＆＃34; text1.txt＆＃34）;

我刚开始冒险进入网络编程，所以我对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文件中使用了display选项。因此，请将以下内容添加到您的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>

Answer 1

你需要做很多事情。以下是一个模型，可以帮助您了解如何从外部文件中获取文本。由于您更关注配置方法，我建议使用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的文章，以加强对它如何工作的理解。

如果您有任何问题，请告诉我。

Answer 2

您可以通过AJAX请求加载文本文件，并可以设置text.where。

如何编程HTML页面以在按钮单击时更新从文本文件导入的文本？

2 个答案: