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"
  • 添加一个“数据链接”属性来存放您的网址

  • 订阅标签的选择事件

    $(".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 回答