jquery - 我正在尝试 .load() 仅 1 div 但所有内容都已加载

Question

我正在尝试 .load() 仅 1 个 div 的 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);
});

内容.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，您正在尝试获取带有标签的元素的 id，this例如<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'更改为this并使用preventDefaultlike

$('.button').click(function(e) {
   e.preventDefault();// preventing default working
   var id = $(this).attr('id');// this instead of 'this'
   //var id = this.id; // you can use it simply using core javascript
   var url = "content.html#";
   //$('#container').html(" "); //no need to do this
   $('#container').load(url + id);// load will remove previous data
});

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 总是唯一的。