Breaking News: Grepper is joining You.com. Read the official announcement!

sliding tabs css

CoderHomie answered on December 5, 2022 Popularity 6/10 Helpfulness 2/10

answer sliding tabs css

sliding tabs css

Comment

<!--
     You can use the materialize css library for this :) it uses material design
     concepts!
-->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<div class="row">
    <div class="col s12">
	<ul class="tabs">
            <li class="tab col s3"><a href="#test1">Test 1</a></li>
            <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
            <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
            <li class="tab col s3"><a href="#test4">Test 4</a></li>
	</ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
</div>

<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js" integrity="sha512-m2PhLxj2N91eYrIGU2cmIu2d0SkaE4A14bCjVb9zykvp6WtsdriFCiXQ/8Hdj0kssUB/Nz0dMBcoLsJkSCto0Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Init the tabs -->
<script>
 jQuery(document).ready(function(){
     jQuery('.tabs').tabs();
 });
</script>

Popularity 6/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: css html sliding tabs

Link to this answer
Share Copy Link

Contributed on Dec 05 2022

CoderHomie

0 Answers Avg Quality 2/10

Closely Related Answers

css tab slider

Comment

<div class="tab-container">
  <div class="tab active">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <div class="tab">Tab 4</div>
</div>

Popularity 4/10 Helpfulness 1/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

sliding tabs css

Contents

More Related Answers

sliding tabs css

Closely Related Answers

css tab slider

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.