How it Works
This plugin uses the index of an element and relates to another element with the same index. It uses the index as key to relations without using element id's
Usage
$('#tabs').aAnyTabs({
indexElement : 'li',
dataId : 'tabs-data',
dataElement : 'p',
});
Options
- indexElement
- The element that we use as "index"
- dataId
- The "id" of the element who has the data
- dataElement
- The element with the data, the indexElement connect with this type of element.
Example 1 : UL, LI + P
$('#tabs').aAnyTabs({
indexElement : 'li',
dataId : 'tabs-data',
dataElement : 'p',
});
<div id="tabs">
<ul class="t-menu">
<li><a href="javascript:void(0);">jQuery</a></li> <!-- index element : li -->
<li><a href="javascript:void(0);">HTML</a></li>
<li><a href="javascript:void(0);">tab 3</a></li>
<li><a href="javascript:void(0);">tab 4</a></li>
<li><a href="javascript:void(0);">tab 5</a></li>
</ul>
</div>
<div id="tabs-data"> <!-- data id -->
<p>...</p> <!-- data element : p -->
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit dolorem exercitationem adipisci. Consequatur laborum rerum numquam nisi molestiae quidem officiis blanditiis et temporibus corrupti neque modi suscipit mollitia amet vel.
2. Eligendi repellat molestias dolor impedit dignissimos porro deleniti reiciendis blanditiis sit ratione error est in deserunt non fugiat similique sint quam earum ipsa quaerat soluta repellendus quia totam. Tenetur dignissimos.
3. Odio suscipit amet eligendi numquam nemo quos saepe voluptates. Tenetur rem rerum nam suscipit blanditiis vitae hic illo quaerat eaque perspiciatis explicabo beatae quibusdam labore quia ab repellat quos in!
4. Veritatis ipsa optio velit necessitatibus sequi suscipit ad animi alias illum dolorem similique provident quae magnam doloribus repellat. Voluptatibus mollitia tenetur temporibus praesentium esse vero voluptatem fuga dolore repellat aperiam.
$('#tabs-2').aAnyTabs({
indexElement : 'dd',
dataId : 'tabs-2-data',
dataElement : 'span',
});
<div id="tabs-2">
<dl>
<dd><a href="javascript:void(0);">jQuery</a></dd> <!-- index element : dd -->
<dd><a href="javascript:void(0);">HTML</a></dd>
<dd><a href="javascript:void(0);">tab 3</a></dd>
<dd><a href="javascript:void(0);">tab 4</a></dd>
<dd><a href="javascript:void(0);">tab 5</a></dd>
</dl>
</div>
<div id="tabs-2-data"> <!-- data id -->
<span>...</span> <!-- data element : span -->
<span>...</span>
<span>...</span>
<span>...</span>
<span>...</span>
</div>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit dolorem exercitationem adipisci. Consequatur laborum rerum numquam nisi molestiae quidem officiis blanditiis et temporibus corrupti neque modi suscipit mollitia amet vel.
2. Eligendi repellat molestias dolor impedit dignissimos porro deleniti reiciendis blanditiis sit ratione error est in deserunt non fugiat similique sint quam earum ipsa quaerat soluta repellendus quia totam. Tenetur dignissimos.
3. Odio suscipit amet eligendi numquam nemo quos saepe voluptates. Tenetur rem rerum nam suscipit blanditiis vitae hic illo quaerat eaque perspiciatis explicabo beatae quibusdam labore quia ab repellat quos in!
Tabs : IMG + SPAN
$('#tabs-img').aAnyTabs({
dataId : 'tabs-img-data',
dataElement : 'span',
});
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut ipsum veniam enim debitis doloremque distinctio velit omnis possimus impedit hic fugiat sed reprehenderit quis saepe aspernatur nihil expedita repudiandae cum?
2. Quo dolor sint omnis accusamus et modi sequi dolorum magnam. A impedit libero sapiente sit adipisci tempora tempore magnam id totam in laboriosam expedita voluptates omnis neque delectus nesciunt voluptas!
3. Illo laborum quidem ab eum libero dolor nesciunt ipsam maiores voluptas a eaque totam perspiciatis expedita aspernatur ipsa repudiandae at. Nisi facilis assumenda et culpa sapiente quia deserunt cupiditate odio.
4. Quas reiciendis laudantium animi labore adipisci dignissimos ea autem maxime sed ipsam eius rem facilis enim alias deserunt dolorem est repellendus. Ullam numquam ipsam quae eveniet placeat inventore provident explicabo.