záložky s jquery

Toggle class name on click in jQuery

by Petr Haluza

HTML

<div id="productsShow">

	<header>Součástí ceny školení jsou tyto produkty:</header>

<div class="prodTabs">
  <ul id="prodTabs-nav">
    <li>
			<a href="#prod1">
				<img src="https://www.img4.cz/www/img/imgthumb?code=NETDAH3124">
				<div>Dahua NVR12345</div>
			</a>
		</li>
    <li>
			<a href="#prod2">
				<img src="https://www.img4.cz/www/img/imgthumb?code=NETDAH3131">
				<div>Dahua NVR12345 HDD rekordér černý s USB</div>
			</a>
		</li>
    <li>
			<a href="#prod3">
				<img src="https://www.img4.cz/www/img/imgthumb?code=NETDAH3141">
				<div>Dahua NVR12345 HDD rekordér</div>
			</a>
		</li>		
  </ul> <!-- END prodTabs-nav -->
  
	<div id="tabs-content">
    
		<div id="prod1" class="tab-content">
      <p>"1 lorem ipsum."</p>
    </div>
    
		<div id="prod2" class="tab-content">
      <p>"2 lorem ipdum."</p>
    </div>
    
		<div id="prod3" class="tab-content">
      <p>"3 lorem iprum."</p>
    </div>
    
  </div> <!-- END tabs-content -->
</div> <!-- /.prodTabs -->

CSS

* {box-sizing: border-box}
html { margin: 0; padding: 0;}
body { font-family: Arial, sans-serif; font-weight: 300;margin:0;}

:root {
  --border-color: #dee8f4;
}

body { background: #f1f5fa; }
#productsShow { padding: 1em; margin:0 auto; max-width:800px }

#productsShow header { text-align:center}

/* záložky */
.prodTabs { width: 100%;}
ul#prodTabs-nav { list-style: none; display: flex; gap: 10px; justify-content: center; padding:0; }
ul#prodTabs-nav li { max-width: 230px; flex: 1; background: white; box-shadow:0 2px 16px -5px #aeb8c4; border-radius: 7px; position: relative; border: 2px solid transparent}

ul#prodTabs-nav li.active { box-shadow: none; border: 2px solid var(--border-color);}
ul#prodTabs-nav li.active:after { content:""; position: absolute; z-index:10; left: -2px; bottom: -20px; width: 100%; height: 35px; background:white; border-left:2px solid var(--border-color); border-right: 2px solid var(--border-color)}
ul#prodTabs-nav li.active:before {content:""; display: block; position: absolute; top:0; border-radius: 7px; border-top: 3px solid rgb(19, 99, 223); width:100%; height: 10px}

#prodTabs-nav li a { cursor: pointer; color: initial; text-decoration: none; display: block; padding: 0 10px 10px}
#prodTabs-nav li a img { max-width:100%;}
#prodTabs-nav li a div { position: relative; z-index:15; text-align:center}


.tab-content { position: relative; z-index:5; padding: 10px 15px; border: 2px solid var(--border-color); background-color: #FFF;}

JavaScript

// Show the first tab and hide the rest
$('#prodTabs-nav li:first-child').addClass('active');
$('.tab-content').hide();
$('.tab-content:first').show();

// Click function
$('#prodTabs-nav li').click(function(){
  $('#prodTabs-nav li').removeClass('active');
  $(this).addClass('active');
  $('.tab-content').hide();
  
  var activeTab = $(this).find('a').attr('href');
  $(activeTab).fadeIn();
  return false;
});