Question

我正在尝试.load（）只有1 div of content.html（＃tabs-1，＃tabs-2），但是当点击类.button时，所有页面都被加载了。

<li><a class="button" id="tabs-1" >Option 1</a></li> 
<li><a class="button" id="tabs-2">Option 2</a></li>

<div id="container"></div>

$('.button').click(function() {
    var id = $('this').attr('id');
    var url = "content.html#";
    $('#container').html(" ");
    $('#container').load(url + id);
});

content.html

<div id="tabs-1">
   CONTENT 1 CONTENT 1  CONTENT 1  
</div>

<div id="tabs-2">
   CONTENT 2 CONTENT 2 CONTENT 2  
</div>

Answer 1

要获取点击的元素ID，您可以使用this.id，尝试获取标记this的元素的ID，如<this id="x">..</this>

$('.button').click(function () {
    var url = "content.html #"
    $('#container').html("").load(url + this.id);
});

Answer 2

它应该如下： -

 $('.button').click(function() {
    var id = $(this).attr('id');
    var url = 'content.html("#';
    $('#container').html(" ");
    $('#container').load(url + id + '")');

  });

Answer 3

仅将'this'更改为此并使用{/ 1}}

preventDefault

Answer 4

var html1='';
var html2='';

html1='<div class="tabs-1">CONTENT 1 CONTENT 1  CONTENT 1  </div>';
html2='<div class="tabs-2">CONTENT 2 CONTENT 2 CONTENT 2  </div>';

$('.button').click(function () {
        var id = $(this).attr("id");
        if(id == "tabs-1"){
         var html = html1;
        }else{
         var html = html2;
        }
        $('#container').html("");
        $('#container').html(html);
    });

我更改了ID，因为ID始终是唯一的。

我正在尝试.load（）只有1个div，但所有内容都已加载

4 个答案: