Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.04.2016, 16:53
Новичок на форуме
Отправить личное сообщение для Sinner3d Посмотреть профиль Найти все сообщения от Sinner3d
 
Регистрация: 16.03.2016
Сообщений: 4

Якорный переход на одну из вкладок на странице
Добрый день хочу реализовать функционал при клике на ссылке
<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');
			}
});

Примерный функционал реализован у Юрмарт на сайте, при описании товара
Ответить с цитированием
  #2 (permalink)  
Старый 04.05.2016, 09:19
Новичок на форуме
Отправить личное сообщение для Sinner3d Посмотреть профиль Найти все сообщения от Sinner3d
 
Регистрация: 16.03.2016
Сообщений: 4

сам так и не смог найти ответ.
Ответить с цитированием
  #3 (permalink)  
Старый 16.06.2016, 10:57
Новичок на форуме
Отправить личное сообщение для Sinner3d Посмотреть профиль Найти все сообщения от Sinner3d
 
Регистрация: 16.03.2016
Сообщений: 4

подниму тему
Ответить с цитированием
  #4 (permalink)  
Старый 16.06.2016, 12:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,597

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переход по ссылке к якорю на другой странице tvixa Элементы интерфейса 10 01.10.2013 09:19
Функция для перевода размера из байтов в понятный для человека формат Антон Крамолов Ваши сайты и скрипты 4 05.04.2013 16:42