2017-03-20 60 views
0

我想將txt文件加載到div tab-content中。在下面的代碼中,我使用了tab-content中的一段。我想顯示文本文件的信息而不是該段落。我如何使用jQuery來做到這一點?如何使用jquery將txt文件加載到div選項卡

<div class="create"> 
    <ul class="nav nav-tabs" id="myTab" style="width: 22%"> 
     <li class="active"><a href="#cpp">C++</a></li> 
     <li><a href="#java">Java</a></li> 
     <li><a href="#python">Python</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="cpp" class="tab-pane fade in active"> 
      <h3>#Creating an array in C++</h3> 
     </div> 
     <div id="java" class="tab-pane fade"> 
      <h3>#Creating an array in Java</h3> 
     </div> 
     <div id="python" class="tab-pane fade"> 
      <h3>#Creating an array in Python</h3> 
     </div> 
    </div> 
</div> 
<!--#End of create div--> 
<div class="insert"> 
    <ul class="nav nav-tabs" id="myTab2" style="width: 22%"> 
     <li class="active"><a href="#myTab2-cpp">C++</a></li> 
     <li><a href="#myTab2-java">Java</a></li> 
     <li><a href="#myTab2-python">Python</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="myTab2-cpp" class="tab-pane fade in active"> 
      <h3>#Inserting an array in C++</h3> 
     </div> 
     <div id="myTab2-java" class="tab-pane fade"> 
      <h3>#Inserting an array in Java</h3> 
     </div> 
     <div id="myTab2-python" class="tab-pane fade"> 
      <h3>#Inserting an array in Python</h3> 
     </div> 
    </div> 
</div> 
+0

[jQuery的設置HTML()值]的可能的複製(http://stackoverflow.com/questions/4126033/jquery-set-html-value) –

回答

0

很簡單:

$.get("your.txt", function(data) { 
    $(".yourDestinationDivClass").html(data); 
}); 
0

使用jQuery ajax像:

$.ajax({ 
    url : "helloworld.txt", 
    dataType: "text", 
    success : function (data) { 
     $("#destination").html(data); 
    } 
}); 
0

首先,你需要添加的jQuery ajax,然後你需要在阿賈克斯添加dataType選項請求。請按照下面的代碼::

$.ajax({ 
    url : "helloworld.txt", // your txt file path 
    dataType: "text", 
    success : function (data) { 
     $(".tab-content").html(data); // replace .tab-content if you want to put .txt file's data in other place. 
    } 
}); 
相關問題