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