How to manually create links to change focus on horizontal tab items? I have a horizontal tab group with a few horizontal tab items.  I want to create a text link that allows users to move through the tabs instead of clicking on the horizontal tabs themselves.  

I found this other question:
How can I activate a horizontal tab?

Unfortunately the answers do not work.  I see that my horizontal tab items have a unique ID. For example, id="node_contenttype_form_group_stuff".  Simply creating a link like the below does not work:

&lt;a href="http://www.example.org/node/add/contenttype#node_contenttype_form_group_stuff"&gt;CLICK HERE FOR NEXT TAB ITEM&lt;/a&gt;


By clicking on that link, it takes you back to the very top of the horizontal tab groups, but it does not put the horizontal tab item specifically into focus.  It just pulls you back to the top of the page where you can see the horizontal tab group.  

EDIT: Looking at the source code, it appears that all the tab items are like the below in the HTML source:

&lt;li class="horizontal-tab-button horizontal-tab-button-1" tabindex="-1"&gt;
  &lt;a href="#"&gt;
    &lt;strong&gt;
      II. Text of horizontal item #2
    &lt;/strong&gt;
  &lt;span class="summary"&gt;&lt;/span&gt;
  &lt;/a&gt;
&lt;/li&gt;
There is a css trick that can achieve this.

Firstly, reset the default positioning on the a element:

.horizontal-tabs &gt; ul.horizontal-tabs-list li a {
  position: static;
}


Secondly, apply an ::after pseudo-element to the link for the horizontal tab AFTER the selected/active one:

.horizontal-tabs &gt; ul.horizontal-tabs-list li.horizontal-tab-button.selected + li a::after {
  content: "next";
  display: block;
}


Given we reset the positioning on the parent li (and the ul is relatively positioned by default) we can now position our pseudo-element relative to the ul, which spans the whole content block. So if you wanted to put your "next" link top right, do something like this.

.horizontal-tabs &gt; ul.horizontal-tabs-list li.horizontal-tab-button.selected + li a::after { 
  content: "next";
  display: block;
  position: absolute;
  right: 0;
  top: 30px;
}


This example assumes that our ul has a height of 30px. Given that the last li element (ie the final tab) does not have an immediate sibling, the "+" selector does not match on the last li, which automatically excludes the "next" link on the final tab.