大佬教程收集整理的这篇文章主要介绍了Jquery选项卡在按钮单击时重新加载内容，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
选择选项卡时,我只需将当前日期@L_696_3@到内容区域html中.我还有一个类名为“Button”的链接.单击此链接时,我想重新加载当前所选选项卡的内容.但是通过我尝试过的解决方案,我无法让它发挥作用.我可以看到加载了“按钮点击”事件,但以下代码没有重新加载我的数据：
$(".Tabs").tabs('load',$(".Tabs").tabs('option','SELEcted'));
我也一直在测试：
var SELEcted = $(".Tabs").tabs('option','SELEcted'); $(".Tabs").tabs('SELEct',null); $(".Tabs").tabs('SELEct',SELEcted);
这是我的jquery代码：
$(function() { var $tabs = $(".Tabs").tabs({ SELEcted: null,SELEct: function() { alert("this doesn't run on button click"); //Sets Content's html to current date $("#Content").html(new DatE); } }); $('.button').click(function() { alert("this runs on button click"); //Here I want to reload the current SELEcted tab $(".Tabs").tabs('load','SELEcted')); return false; }); $('.Tabs').tabs('SELEct',0); // SELEct first tab });
这是html：
<div class="Tabs">
<ul>
<li><a href="#Content">Tab1</a></li>
<li><a href="#Content">Tab2</a></li>
</ul>
<div id="Content">
</div>
</div>
<a class='Button' href='#'>Load Content Again</a>
$('.button').live('click',function() {
//Here I want to reload the current SELEcted tab
$tabs.tabs('load',$tabs.tabs('option','SELEcted'));
return false;
});
此外,由于.button是一个链接,你需要@L_696_3@return false;在那个功能里面.
从查看代码开始,我不确定为什么要将它设置为在您单击之后才加载选项卡.同时单击任何选项卡将始终加载相同的内容(网址不会更改).最后,您不需要使用eval()脚本(这可能是问题吗？).
除了这些问题,看起来您的代码应该可行.
我也不确定你的json是如何格式化的,所以我假设以下json格式重写了这个：
({ "items": [ { "title": "example 1" },{ "title": "example 2" },{ "title": "example 3" },{ "title": "example 4" },{ "title": "example 5" },{ "title": "example 6" },{ "title": "example 7" },{ "title": "example 8" },{ "title": "example 9" },{ "title": "example 10" } ] })
脚本
$(function() { var $tabs = $(".Tabs").tabs({ SELEcted: null,SELEct: function(event,ui) { loadTab( ui.index ); // ui.index = index of the clicked tab } }); $('.button').live('click',function() { //Here I want to reload the current SELEcted tab loadTab( $(".Tabs").tabs('option','SELEcted') ); return false; }); $('.Tabs').tabs('SELEct',0); }); function loadTab(indX){ $.ajax({ type: "GET",url: "http://domain.com/@R_674_9260@ce.svc/get",dataType: "json",success: function(data) { var content = ""; $.each(data.items,function(items){ content += "<a class='Button' href='#'>" + this.title + "</a><br>"; }); $("#Content").html(content + "<br />Tab Index #" + indx + " on " + (new Date()).toUTCString()); },error: function(XMLhttprequest,textStatus,errorThrown) { if (!$('#error').length) $("#Content").prepend('<div id="error"></div>'); $('#error').html(textStatus + '<br /><br />'); } }) }
以上是大佬教程为你收集整理的Jquery选项卡在按钮单击时重新加载内容全部内容，希望文章能够帮你解决Jquery选项卡在按钮单击时重新加载内容所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。