SEO Friendly URL for JQuery Tabbed Content

I have developed a jQuery powered tabbed content system, where clicking on a tab changes the content below. However, I am facing an SEO issue. The SEO specialist has advised me to make it more SEO-friendly by adding different URLs to each tab.

Can anyone provide guidance on how to add a URL for each tab? For example:

When Tab 2 is clicked, the URL should be http://codepen.io/sanjeevks121/pen/wzoBmy?Tab2

The title of the second tab is added to the URL after a question mark.

Here is a live demo on 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 -->

javascriptjqueryhtmlcss

Answer №1

To extract the # string from the URL, you can utilize window.location.hash.length and then parse the hash string. Using an attribute selector, you can trigger a click event.

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

  // the following code accomplishes the required task
  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 -->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revolutionizing the method of projecting a texture onto a halfsphere in three.js projects

I am currently working on a project in three.js where I am trying to project an image onto the inside of a halfsphere. The half sphere is created using the following code: const geometry = new THREE.SphereGeometry(Component.radius, this.resolution, this.re ...

javascriptthree.js3d

Navigate the Xpath to target the text enclosed by tags, pausing the extraction process upon encountering an internal tag within the

I am seeking to extract specific text from various forms of HTML code. Only the text within certain tags should be considered, and everything after those tags should be ignored. The structure of the HTML varies. <span class="classA">Text 1 ...

htmlxpathxpath-1.0

Use the spread operator to assign a value to the keyname

Would it be possible to dynamically assign key names to the spread operator? For instance, consider the following: 'first, second, third'.split(','); // Array(3) : [ 'first', 'second', 'third' ] I would ...

javascriptecmascript-next

Tips for inserting the <a> HTML tag into a JSON array object

I am relatively new to creating array objects and I am unsure on how to add a link within a <a> tag in a JSON file. Here is the JSON object code: powerUpList: [ { id: 8, name: 'Automate your API column type ', description: & ...

javascripthtmljquerynode.jsejs

What makes CVE-2021-33623 susceptible to ReDoS attacks?

CVE-2021-33623 points out that the code snippet below (addressed in this commit, along with test cases) is susceptible to ReDoS vulnerabilities: trimNewlines.end = string => string.replace(/[\r\n]+$/, ''); What makes it prone to ReD ...

javascriptregexdenial-of-service

Inheritance in SASS - excluding the parent class

Can I apply this syntax to inherit a class in SASS? Code .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } Output .message, .success, .error, .warning { border: 1px solid # ...

cssinheritancesass

Utilizing Host Styles in Angular2 Components

In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...

cssangular

I'm puzzled, can anyone provide clarification on the concept of xml?

Recently, Sheshank S. provided me with a solution to my question, but I failed to grasp its meaning. Can someone please explain it to me? Despite looking through various tutorials on websites and videos, none of them have been able to clarify what this cod ...

javascripthtmlxhtml

Steps for utilizing response data as parameters for useInfiniteQueryHere is how you can make

On the specific page where I am implementing useInfiniteQuery const { data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, status } = useInfiniteQuery( ['posts', searchState], ({ pageParam = 1 }) => post.search({ . ...

javascriptreactjstypescriptreact-query

Enhance the functionality of your Rails application by implementing Ajax or jQuery to asynchronously load table elements separately from the page

Currently, I am facing an issue with a page that displays a list of user sites. The problem lies in the fact that I am making an API call for each site to check its status, which is causing the page to load very slowly. To address this issue, I would like ...

javascriptjqueryruby-on-railsajaxcoffeescript

Transforming AngularJS $http POST requests into GET requests

I came across a scenario where I needed to update the logo path in my application. So, I defined a route like this: Route::post('/updateLogo', 'CaptivePortalController@updateLogo'); After defining the route, I made a POST request as s ...

javascriptangularjslaravellaravel-5angular-file-upload

How to retrieve the data variable in Vue JS script

I recently started using vue.js and I'm working with version 2.5.13. In my component file script, I am trying to access a data variable but it keeps returning as undefined. The id attribute in the component is displaying the correct value, however w ...

javascriptvue.jsvuejs2

Sending requests across domains from HTTPS to HTTP with callback functionality, and reversing the process

Prior to our conversation, I had created it using Flash. I uploaded a special file (crossdomain.xml) on the server side (https), while the Flash component was placed on the http server. Although they belong to different domains on the https and http serv ...

javascriptphpxmlhttprequestcross-domain

The anchoring scroll position is incorrect due to the constantly changing content

Within my HTML document, there is an element identified by the #pro-plan id. Upon visiting the URL localhost:3000/#pro-plan, the page successfully scrolls to the designated section; however, at times it may end up in the wrong position. One possible expl ...

javascripthtmlreactjsnext.js

Tips for showing a username when using jQuery's ( document ).ready function?

I am currently using WordPress and have added some content after a div class. I would like to know if it is possible to display the username of the logged-in user within this document ready function? Below is the code I have written. The shortcode does no ...

jquerywordpressdocument-ready

Expanding iframe elements

I am having difficulty adjusting the size of the iframe content (within a fixed-sized iframe). Essentially, I would like the content to scale smaller or larger as if the browser's zoom function was being used. Through my CSS experiments, it seems achi ...

javascriptcssiframe

Randomly order the vertices and incident polygons for three.js fill color on a face

Recently, I delved into learning three.js and am eager to figure out how to fill in the face color after creating a polygon based on randomly given vertices. Can anyone guide me on how to achieve this? var scene = new THREE.Scene(); var camera = new THREE. ...

javascriptthree.js3dpolygonvertex

Split vue.js templates into individual files

Is there a way to modify this code in Vue.js to achieve the following: <template type="login" /> <template type="subscribe" /> <template id="login"> <label>Username</label> <input placeholder="Enter your username" ke ...

javascriptvue.js

Stylish Combobox with jQuery and CSS

Seeking assistance in creating a stylish combo box using CSS and jQuery. The combo box will contain 3 items, and I need guidance on how to select items within the combo box and display the selected item. Any help or suggestions would be greatly appreciated ...

jquerycsscombobox

Creating a dynamic select functionality in Drupal forms

Being more focused on backend development, I am facing a challenge that may be simple for jQuery experts. In Drupal, I have two arrays - one containing names of views and the other having displays for each view. To populate these arrays, here is the code s ...

javascriptphpjquerydrupalform-api