0

以下のようにjqueryタブを使用しています。各タブをクリックすると、その href URL に従って AJAX 呼び出しが行われます。問題は、AJAX 呼び出しが SEO フレンドリーではないことです。どうすればSEOフレンドリーにできますか？タブをクリックするたびにポストバックを実行し、ポストバック後に現在のタブを選択したままにする方法。また、各タブのクリックで URL を更新する方法、つまりユーザーが [SPECIFICATION] タブをクリックした場合、ポスト バック URL は www.domnainname/cardetails/specification のようになります。

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/Details?ID=@ViewBag.versionId&grpId=5" title="tabs-2">Specifications</a></li>
                    <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=1" title="tabs-3">Exterior</a></li>
                    <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=2" title="tabs-4" >Interior</a></li>
                    <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=3" title="tabs-5">Dimensions</a></li>
                    <li><a href="/Version/Details?ID=@ViewBag.versionId&grpId=4" title="tabs-6">Feature</a></li>
                    <li><a href="/Version/Details?versionID=@ViewBag.versionId&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>

ありがとう、

@ポール

4

1 に答える 1

0

あなたがやろうとしていることに基づいて、次のことをお勧めします。

  • href="/Your/links/address" を href="#corresponding-panel" に置き換えます
  • URL を格納する「data-link」属性を追加します

  • タブの選択イベントをサブスクライブする

    $(".tabs").tabs({select:function(ui, event){

    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') );
            }            
        });
    }
} }});​

これがJSFiddleの例です

于 2012-12-03T18:53:33.037 に答える