Якорный переход на одну из вкладок на странице
Добрый день хочу реализовать функционал при клике на ссылке
<a class="btn-border" href="#features">Подробные характеристики</a>Переходить и открывать вкладку с data-tab="features" Структура вкладок
<div class="widget tabs">
<div id="horizontal-tabs">
<ul class="tabs">
<li id="tab1" data-tab="detail" class="current" ><a href="#detail">Описание</a></li>
<li id="tab2" data-tab="features"><a href="#features">Характеристики</a></li>
<li id="tab3" data-tab="video"><a href="#video">Видео</a></li>
<li id="tab4" data-tab="sup_oborud"><a href="#sup_oborud">Сопутствующее оборудование</a></li>
<li id="tab5" data-tab="design_features"><a href="#design_features">Конструктивные особенности</a></li>
</ul>
<div class="contents">
<div class="tabscontent" data-tab="detail" id="content1 " >
<!--описание характеристики начало-->
Описание
<!--описание характеристики начало-->
</div>
<div class="tabscontent" data-tab="features" id="content2 features">
таблица<!--технические характеристики начало-->
<!--технические характеристики конец-->
</div>
<div class="tabscontent" data-tab="video" id="content3">
<div class="video">
<!--видео характеристики гачало-->
<iframe width="640" height="480" src="//www.youtube.com/embed/-yjIppthPAA?rel=0" frameborder="0" allowfullscreen=""></iframe>
<!--видео характеристики конец-->
</div>
</div>
<div class="tabscontent" data-tab="sup_oborud" id="content4">
<!--начало-->
Сопутствующее оборудование
<!--конец-->
</div>
<div class="tabscontent" data-tab="design_features" id="content5">Конструктивные решения</div></div>
</div></div>
Скрипт работы вкладок
// JavaScript Document
$(document).ready(function() {
var loc = window.location.hash;
if (loc != "") {
var href = loc;
href = href.replace('#','');
var target = $('.tabs').find(href);
$('.tabs li').removeClass('current');
$('.tabs li[data-tab="'+href+ '"]').addClass('current');
$('.tabscontent').hide();
$('div[data-tab="'+href+ '"]').fadeIn('slow');
}
else
{
$('.tabscontent').hide();
$('.tabs li[data-tab="detail"]').addClass('current');
$('div[data-tab="detail"]').fadeIn('slow');
}
});
Примерный функционал реализован у Юрмарт на сайте, при описании товара |
сам так и не смог найти ответ.
|
подниму тему
|
Sinner3d,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.current a{
background-color: #FF00FF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
var $li = $("li[data-tab]"),
$content = $(".tabscontent[data-tab]").hide();
$li.each(function(indx, li) {
li = $(li);
li.on("click", function(event) {
event.preventDefault();
$li.not(li.addClass("current")).removeClass("current");
$content.not($content.eq(indx).fadeIn("slow")).fadeOut("fast")
})
}).filter(".current").click()
});
</script>
</head>
<body>
<div class="widget tabs">
<div id="horizontal-tabs">
<ul class="tabs">
<li id="tab1" data-tab="detail" class="current" ><a href="#detail">Описание</a></li>
<li id="tab2" data-tab="features"><a href="#features">Характеристики</a></li>
<li id="tab3" data-tab="video"><a href="#video">Видео</a></li>
<li id="tab4" data-tab="sup_oborud"><a href="#sup_oborud">Сопутствующее оборудование</a></li>
<li id="tab5" data-tab="design_features"><a href="#design_features">Конструктивные особенности</a></li>
</ul>
<div class="contents">
<div class="tabscontent" data-tab="detail" id="content1 " >
<!--описание характеристики начало-->
Описание
<!--описание характеристики начало-->
</div>
<div class="tabscontent" data-tab="features" id="content2 features">
таблица<!--технические характеристики начало-->
<!--технические характеристики конец-->
</div>
<div class="tabscontent" data-tab="video" id="content3">
<div class="video">
<!--видео характеристики гачало-->
<iframe width="640" height="480" src="//www.youtube.com/embed/-yjIppthPAA?rel=0" frameborder="0" allowfullscreen=""></iframe>
<!--видео характеристики конец-->
</div>
</div>
<div class="tabscontent" data-tab="sup_oborud" id="content4">
<!--начало-->
Сопутствующее оборудование
<!--конец-->
</div>
<div class="tabscontent" data-tab="design_features" id="content5">Конструктивные решения</div></div>
</div></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 03:33. |