0

順序付けられていないリストには、いくつかの a といくつかの href があります。クリックすると、外部ファイルからいくつかの html が書き込まれます。ローカルでのみ実行されるため、サーバー側の言語は使用できません。

私のファイルの構造は次のとおりです。 

<body>
<ul>
    <li><a href="#">item1</li>
    <li><a href="#">item2</li>
    <li><a href="#">item3</li>
    <li><a href="#">item4</li>
</ul>

<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>

</html>

前もって感謝します

4

4 に答える 4

1

スクリプトを読み込もうとしているように見えるので、次を使用してそれを行うより良い方法がありますjQuery.getScript()。

$('#triangle').click(function() {
    $.getScript("js/triangle.js");
});

また、arieljuod が指摘しているように、実際には HTML ファイルに jQuery をロードしていません。それを使用するには、次のようにする必要があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

(または、お気に入りの jQuery バージョンと CDN を選択してください。これは数ある中の 1 つです。)

于 2013-10-15T03:12:17.313 に答える
0

You can listen for a click on an item and based on that trigger an ajax call for the appropriate file. Load the contents of that file into your content div within the success callback.

Happy to walk you through sample code live over here: https://sudonow.com/session/525cb34035e089113700000a

Pasting the content of the code editor here:

<body>
<ul>
    <li id="item1" class="item"><a href="#">item1</li>
    <li id="item3" class="item"><a href="#">item2</li>
    <li id="item4" class="item"><a href="#">item3</li>
    <li id="item5" class="item"><a href="#">item4</li>
</ul>

<div id="content">
<!-- when a link is clicked write some html from external file to this spot-->
</div>
</body>

</html>

//JS
//convert some file content to html
var genHtmlContent = function(content){
  //do something here depending on how data is stored e.g. we could just return an html string from some keyvalue json
  return content.htmlContent;
}

//Use javascript to detect a click on a list item and grab the appropriate content
$("item").click(function(event){
  var selectedId = event.target.id;
  var url = "http://www.mysite.com/" + selectedId + ".json";
  $.get(url, function(content) {
    var htmlContent = genHtmlContent(content);
    $("#content").val(htmlContent);
  })

})

//sample json file on server

//item1.json

{htmlContent: "<div>I am Item 1</div>"}
于 2013-10-15T03:16:32.413 に答える
0

あなたはしたくないdocument.write()。

新しい HTML をどこに配置したいかによっては、おそらく代わりにこれが必要になるでしょう:

$('head').append('<script src="js/square.js"></script>');
于 2013-10-15T03:11:53.717 に答える
0

迅速かつ簡単な解決策はiframe. それぞれ異なる URL を持つ iframe を必要な数だけ追加します。それらに共通のクラスを与え、CSS または jQuery を使用して非表示にします。リンクをクリックすると、デフォルトが防止され、対応する iframe が表示されます。

<ul>
    <li><a href="#" id="item1">item1</li>
</ul>

<div id="content">
<iframe class="iframes" id="iframe1" src="http://www.page1.com"></iframe> 
</div>

JavaScript にこれを追加します。

$('.iframes').hide();
$('#item1').click(function() {
    event.preventDefault();
    $('#iframe1').show();
});
于 2013-10-15T04:56:35.567 に答える