如何在單擊按鈕時對HTML頁面進行編程以更新從文本文件導入的文本？

Question

我一直在尋找一種方法來更新部分中的文本而不必重新加載頁面時遇到了很多麻煩。 我想代碼要做的是，當您單擊其中一個選項卡時，更新一節（下面的id =“ section2”）中的文本和圖片。

當您單擊其中一個選項卡時，我希望頁面執行的操作是從本地.txt文件加載文本（將來還會加載.jpg）。 到目前為止，changeText函數會更新文本，但僅在您手動鍵入文本時才更新。

從下面的我的代碼，這工作：

$（'＃section-text'）。html（“ text1的測試”）;

但是我想做的是從名為“ text1.txt”的.txt文件中加載文本

$（ '＃部分文本'）HTML（ “text1.txt”）。

我剛剛開始涉足網絡編程，因此我對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>

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請求加載文本文件，並可以在任意位置設置文本。

如何在單擊按鈕時對HTML頁面進行編程以更新從文本文件導入的文本？

問題描述

2 個解決方案

解決方案1
1 已采納 2015-10-14 19:00:05

解決方案2
0 2015-10-14 17:35:56

如何在單擊按鈕時對HTML頁面進行編程以更新從文本文件導入的文本？

問題描述

2 個解決方案

解決方案1 1 已采納 2015-10-14 19:00:05

解決方案2 0 2015-10-14 17:35:56

解決方案1
1 已采納 2015-10-14 19:00:05

解決方案2
0 2015-10-14 17:35:56