Форум

Sinner3d · #1 (**permalink**) 12.04.2016, 15:53

Добрый день хочу реализовать функционал при клике на ссылке

<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 · #2 (**permalink**) 04.05.2016, 08:19

сам так и не смог найти ответ.

Sinner3d · #3 (**permalink**) 16.06.2016, 09:57

подниму тему

рони · #4 (**permalink**) 16.06.2016, 11:11

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>

Форум

Справочник

Discord чат

Курсы javascript