ASP.NET MVC JQuery UI選項卡 - 如何使每個選項卡上的回發點擊。如何使它SEO友好？

我正在使用jquery選項卡，如下所示。點擊每個標籤，根據它的href url進行AJAX調用。問題是AJAX調用不是SEO友好的。我怎樣才能讓SEO更友好？如何在每個選項卡上單擊回發，並在回發後將當前選項卡保持爲選中狀態。另外如何更新每個標籤上的網址點擊我的意思是，如果用戶點擊[SPECIFICATION]標籤，後發佈的網址應該看起來像www.domnainname/cardetails /規範ASP.NET MVC JQuery UI選項卡 - 如何使每個選項卡上的回發點擊。如何使它SEO友好？

我使用ASP.NET MVC 4.0。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script> 


<script type="text/javascript"> 
    $(function ($) { 
     $('#example').tabs(); 
    }); 
</script> 


<div id="example" class="tabs" style="width: 698px;"> 
       <ul style="list-style: none;"> 
        <li><a href="/Details/Overview" title="tabs-1">Overview</a></li> 
        <li><a href="/Version/[email protected]&grpId=5" title="tabs-2">Specifications</a></li> 
        <li><a href="/Version/[email protected]&grpId=1" title="tabs-3">Exterior</a></li> 
        <li><a href="/Version/[email protected]&grpId=2" title="tabs-4" >Interior</a></li> 
        <li><a href="/Version/[email protected]&grpId=3" title="tabs-5">Dimensions</a></li> 
        <li><a href="/Version/[email protected]&grpId=4" title="tabs-6">Feature</a></li> 
        <li><a href="/Version/[email protected]&grpId=6" title="tabs-7">Instrument Panel</a></li> 
       </ul> 
       <div id="tabs-1" style="width: 698px;"> 
        This is Tab one 
       </div> 
       <div id="tabs-2"> 
       </div> 
       <div id="tabs-3"> 
       </div> 
       <div id="tabs-4"> 
       </div> 
       <div id="tabs-5"> 
       </div> 
       <div id="tabs-6"> 
       </div> 
       <div id="tabs-7"> 
       </div> 
      </div>

感謝，

@保羅

來源

2012-12-03 Paul

你將內容加載到標籤div，還是你使用標籤作爲一種導航？ – TNCodeMonkey

我將內容加載到選項卡中。每個標籤按照其href點擊加載頁面。 – Paul

我已經發布了一個答案，下面有一個小提琴示例。希望這是你正在尋找的。如果是這樣，請記得接受答案:) – TNCodeMonkey

根據你正在嘗試做的，我建議如下：

替換HREF = 「/你/鏈接/地址」與href =「＃對應面板」
添加「data-link」屬性以容納您的網址

訂閱標籤的select事件

$（「標籤」）的標籤（{選擇：功能（用戶界面，事件）{

if(!$(event.panel).hasClass('loaded')){ 
    var linkURL = $(ui.currentTarget).attr('data-link'); 
    //Ajax load has happend 
    if(linkURL != undefined){ 
     //USE the 'linkURL' variable in place of '/echo/json' 
     $.ajax({ 
      url: "/echo/json" , 
      success:function(data){ 
       $(event.panel).addClass('loaded').html("<h1>Some ajax content loaded from " + $(ui.currentTarget).attr('data-link')); 
      }    
     }); 
    } 
} }});

Here is the JSFiddle example

來源

2012-12-03 18:53:33 TNCodeMonkey

它會是SEO友好嗎？ – Paul

@Paul這取決於你希望如何SEO編碼的路線，控制器，行動和參數。 – TNCodeMonkey

ASP.NET MVC JQuery UI選項卡 - 如何使每個選項卡上的回發點擊。如何使它SEO友好？

回答

相關問題