ASP.NET MVC JQuery UI TAB -如何在每个选项卡上点击回发。如何使它成为SEO的朋友？

Question

我使用jquery选项卡，如下所示。单击每个选项卡，根据其href url进行AJAX调用。问题是AJAX调用并不是SEO友好的。我怎样才能使搜索引擎优化友好？如何在每个选项卡上进行回发，单击并保持回发后选择的当前选项卡。另外，如何更新每个选项卡上的url --我的意思是，如果用户单击“规范”选项卡，在post后的url应该类似于www.domnainname/cardetails/

我正在使用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>

谢谢,

@Paul

Answer 1

根据你想做的事情，我建议如下：

• 将href="/Your/links/address“替换为href=”#相对应-面板“
• 添加一个'data-link‘属性来存放您的url
• 订阅选项卡的选择事件 $(".tabs").tabs({select:function(ui，event)){ if(!$(event.panel).hasClass('loaded')){ var linkURL = $(ui.currentTarget).attr('data-link')；//Ajax加载如果(linkURL !=未定义){//使用'linkURL‘变量代替'/echo/json’$.ajax({ url："/echo/json“)，成功:函数(数据){$(event.panel).addClass(‘load’).html(”从“+ $(ui.currentTarget).attr('data-link')加载的一些ajax内容”)；)；} } })；​

下面是JSFiddle示例