jquery选项卡和js加载内容

Question

我想与js和mvc3一起使用jquery ui选项卡。

<div class="demo"> 
     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">Tab One</a></li> 
       <li><a href="#tabs-2">Tab Two</a></li> 
      </ul> 
      <div id="tabs-1"> 
       <p> </p> 
      </div> 
      <div id="tabs-2"> 
       <p> </p> 
      </div> 
     </div> 
    </div> 

JsFile

function GetTabData(xdata) { 
    $.ajax({ 
     url: ('/Home/GetTabData'), 
     type: 'POST', 
     contentType: 'application/json', 
     data: JSON.stringify({ id: xdata }), 

     success: function (result) { 
      alert("OK !"); 
     }, 
     error: function() { alert("error"); } 
    }); 
} 

MVC3

public ActionResult GetTabData(string xdata) 
{ 
    data = fetch data and return to the calling script  
    return PartialView("_TabDataPartial", data); 
} 

那么问题将是非常基本的，如何绑定JS GetTabData（）与塔博恩和TabTwo

感谢来电。

Answer 1

你可以利用HTML5数据属性，并以下列方式定义链接​​：

<a href="#tabs-1" data-tabId="1" class="tabLink">Tab One</a> 

在你的js

然后，只需绑定上单击事件做到以下几点：

$('.tabLink').on('click', function() { 
    var id = $(this).data('tabId'); 
    GetTabData(id); 
}); 

Answer 2

试试：

$('a').click(function(e) { 
    e.preventDefault(); 
    alert($(this).attr('href')); 
//Call GEtdata here 
}); 

你也需要改变这个

public ActionResult GetTabData(string xdata) 

到

public ActionResult GetTabData(string id) 

怎么把你从ajax呼叫您的data发送id