Question

I am new to Bootstrap and struggling with understanding the flow. I am looking to update a section when an is clicked.

Here is the code

<li class="list-group-item">
  <a data-toggle="tab" href="#tab-1">
    <small class="pull-right text-muted"> 16.02.2015</small>
    <strong>Ann Smith</strong>
    <div class="small m-t-xs">
     <p>Survived not only five centuries, but also the leap scrambled it to make.</p>

    </div>
  </a>
</li>

I want to update a Div with tab1 with a content I get through another URL call. When I put href="my.html", the target div does not update. I think I am missing something simple in Bootstrap... I also tried data-target, but it did not work.

Any help / direction / tutorial would be appreciated.

Answer 1

我不认为这可以通过开箱即用的Bootstrap实现。我想你需要做这样的事情：

$('#tab-1').on('show.bs.modal', function (event) {
    var _this = this;
    var button = $(event.relatedTarget); // Button that triggered the modal
    var href = button.attr('href'); // Extract the href from the opener.
    if(typeof href !== 'undefined' ) {
        $.ajax( href ).done(function(html) {
            _this.html(html);
        }).fail(function() {
            alert('Something went wrong!');
        });
    }
});

这会将show事件绑定到目标模态。从那里你可以从href加载页面。您可以添加一些额外的逻辑/检查以确保href不是以＃开头。当出现问题时，还要正确处理故障，但这应该指向正确的方向。希望它有所帮助。

Answer 2

谢谢@gkempkens

以下是最终使用标签

的方法

	$('a').click(function (e) {
		
		e.preventDefault();
		  
		var url = $(this).attr("data-url");
	  	var href = this.hash;
	  	var pane = $(this);
		
		$(href).load(url,function(result){   
			console.log(result);
		    pane.tab('show');
		});
		
	});

<li class="list-group-item">
  <a data-toggle="tab" href="#tab-1">
    <small class="pull-right text-muted"> 16.02.2015</small>
    <strong>Ann Smith</strong>
    <div class="small m-t-xs">
     <p>Survived not only five centuries, but also the leap scrambled it to make.</p>

    </div>
  </a>
</li>

Bootstrap，如何在使用<a> and data-toggle and data-target

2 个答案: