javascript - JQuery 选项卡式内容 - SEO 友好的 URL

Question

我创建了一个基于 jQuery 的选项卡式内容，单击选项卡会更改下面的内容，但从 SEO 的 Angular 来看我遇到了一个问题，SEO 人员指导我使其对 SEO 友好并使其成为SEO 友好我将不得不在每个选项卡上传递不同的 url。

例如，有人可以指导我如何每次传递 url

如果点击 Tab 2，那么它应该是 http://codepen.io/sanjeevks121/pen/wzoBmy?Tab2

在带有问号的 url 中添加的第二个选项卡的标题

这是关于 Codepen 的工作演示

$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})

})

body {
	margin-top: 100px;
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6
}
.container {
	width: 800px;
	margin: 0 auto;
}
ul.tabs {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs li {
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}
ul.tabs li.current {
	background: #ededed;
	color: #222;
}
.tab-content {
	display: none;
	background: #ededed;
	padding: 15px;
}
.tab-content.current {
	display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Tab One</li>
    <li class="tab-link" data-tab="tab-2">Tab Two</li>
    <li class="tab-link" data-tab="tab-3">Tab Three</li>
    <li class="tab-link" data-tab="tab-4">Tab Four</li>
  </ul>
  <div id="tab-1" class="tab-content current"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  <div id="tab-2" class="tab-content"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
  <div id="tab-3" class="tab-content"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>
  <div id="tab-4" class="tab-content"> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>
<!-- container -->

Answer 1

您必须使用 window.location.hash.length 检测来自 url 的 # 字符串并解析哈希字符串并使用您必须触发点击的属性选择器

$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	});

  // this is code what you need
  if (window.location.hash.length > 0) {
      var hash_str= window.location.hash.split("#")[1];
      $('.tab-link[data-tab=' + hash_str + ']').click();
       
   }

})

body {
	margin-top: 100px;
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6
}
.container {
	width: 800px;
	margin: 0 auto;
}
ul.tabs {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs li {
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}
ul.tabs li.current {
	background: #ededed;
	color: #222;
}
.tab-content {
	display: none;
	background: #ededed;
	padding: 15px;
}
.tab-content.current {
	display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Tab One</li>
    <li class="tab-link" data-tab="tab-2">Tab Two</li>
    <li class="tab-link" data-tab="tab-3">Tab Three</li>
    <li class="tab-link" data-tab="tab-4">Tab Four</li>
  </ul>
  <div id="tab-1" class="tab-content current"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
  <div id="tab-2" class="tab-content"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
  <div id="tab-3" class="tab-content"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>
  <div id="tab-4" class="tab-content"> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</div>
<!-- container -->