Advertise here
Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery - Anekatorial | Aneka Tutorial Blog
Skip to content Skip to sidebar Skip to footer

Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery

Tab yang digunakan untuk membuat beberapa bagian pada halaman web yang dapat bertukar, sama seperti akordeon. Ini membantu untuk mengelompokkan konten dan melihat konten dari grup tertentu pada satu waktu.

Tab dibuat dengan mengikuti markup tertentu adalah sebagai berikut :

  • Tab harus dilampirkan di dalam daftar memerintahkan atau unordered daftar
  • Setiap heading tab harus dibungkus secara individual dalam item daftar dan tag enclosed yang disertakan dengan atribut href yang menentukan konten untuk setiap panel tab
  • Setiap panel tab dapat kosong tetapi harus memiliki ID sendiri sesuai dengan nama hash yang dimasukkan dalam elemen jangkar tab terkait.

Isi di dalam panel tab dapat didefinisikan pada halaman yang sama atau dapat dimuat melalui Ajax, keduanya ditangani oleh atribut href yang terkait dengan tag Anchor dari panel itu. Di bawah ini kita menulis kode untuk tab 4-panel sederhana menggunakan jQuery UI.

Tab yang ditentukan dalam tag div dengan id. Id yang ditentukan di dalam kode jQuery. Di sini kita telah memilih tab 2 sebagai tab default yang akan dipilih ketika halaman web terbuka. Anda dapat mengubahnya dengan menentukan nilai yang berbeda pada pilihan aktif. Catatan: tab yang diindeks mulai dari "0".

Di bawah contoh menggambarkan jQuery Tabs :

Contoh 1 :

kode contoh ini adalah tab jQuery sederhana, semua tab dapat diakses.
<html> 
  
<head> 
    <link href= 
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css' 
          rel='stylesheet'> 
</head> 
    <style> 
        b{ 
            float: right; 
            margin: 7px; 
            color: lime; 
        } 
          
        #anekatorial a:hover{ 
            color: lime; 
            background: gray; 
        } 
          
    </style> 
<body> 
    <br> 
    <br> 
    <div id="anekatorial"> 
        <ul> 
  
            <li><a href="#Algorithms">Algorithms</a></li> 
            <li><a href="#Data_Structure">Data Structure</a></li> 
            <li><a href="#Practice">Practice</a></li> 
            <li><a href="#interview">interview</a></li> 
              
            <b>Anekatorial</b> 
        </ul> 
  
        <div id='Algorithms'> 
            <p> 
                The answer to this is simple, we can have all the  
                above things only if we have performance. So  
                performance is like currency through which we can 
                buy all the above things. Another reason  
                for studying performance is – speed is fun! 
            </p> 
        </div> 
  
        <div id='Data_Structure'> 
            <p> 
                For example, let us say, we want to store marks of  
                all students in a class, we can use an array to store 
                them. This helps in reducing the use of number of  
                variables as we don’t need to create a separate  
                variable for marks of every subject.  All marks can 
                be accessed by simply traversing the array. 
            </p> 
        </div> 
  
  
        <div id='Practice'> 
            <p> 
                Asymptotic Analysis is the big idea that handles  
                above issues in analyzing algorithms. In Asymptotic 
                Analysis, we evaluate the performance of an algorithm 
                in terms of input size (we don’t measure the actual  
                running time). We calculate, how does the time  
                (or space) taken by an algorithm increases with  
                the input size. 
            </p>     
        </div> 
  
        <div id='interview'> 
            <p> 
                Also, in Asymptotic analysis, we always talk about  
                input sizes larger than a constant value. It might  
                be possible that those large inputs are never given 
                to your software and an algorithm  which is  
                asymptotically slower, always performs better for  
                your particular situation. So, you may end up choosing 
                an algorithm that is Asymptotically slower but faster  
                for your software. 
            </p> 
        </div> 
  
    </div> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
    </script> 
    <script> 
        $(document).ready(function() { 
            $("#anekatorial").tabs({ 
                    active: 0 
                }) 
        }) 
    </script> 
  
</body> 
  
</html> 

Output :

Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery


Contoh 2 :

menjaga semua tab tetap tertutup secara default, Anda juga dapat memilih untuk menyimpan semua tab yang ditutup secara default. Untuk melakukan ini kita menggunakan opsi dilipat dan mengatur nilainya ke "true" dan menetapkan nilai pilihan aktif ke false.

<html> 

<head> 
	<link href= 
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
		rel='stylesheet'> 
</head> 
	<style> 
		b{ 
			float: right; 
			margin: 7px; 
			color: lime; 
		} 
		
		#anekatorial a:hover{ 
			color: lime; 
			background: gray; 
		} 
		
	</style> 
<body> 
	<br> 
	<br> 
	<div id="anekatorial"> 
		<ul> 

			<li><a href="#Algorithms">Algorithms</a></li> 
			<li><a href="#Data_Structure">Data Structure</a></li> 
			<li><a href="#Practice">Practice</a></li> 
			<li><a href="#interview">interview</a></li> 
			
			<b>Anekatorial</b> 
		</ul> 

		<div id='Algorithms'> 
			<p> 
				The answer to this is simple, we can have all the 
				above things only if we have performance. So 
				performance is like currency through which we can 
				buy all the above things. Another reason 
				for studying performance is – speed is fun! 
			</p> 
		</div> 

		<div id='Data_Structure'> 
			<p> 
				For example, let us say, we want to store marks of 
				all students in a class, we can use an array to store 
				them. This helps in reducing the use of number of 
				variables as we don’t need to create a separate 
				variable for marks of every subject. All marks can 
				be accessed by simply traversing the array. 
			</p> 
		</div> 


		<div id='Practice'> 
			<p> 
				Asymptotic Analysis is the big idea that handles 
				above issues in analyzing algorithms. In Asymptotic 
				Analysis, we evaluate the performance of an algorithm 
				in terms of input size (we don’t measure the actual 
				running time). We calculate, how does the time 
				(or space) taken by an algorithm increases with 
				the input size. 
			</p>	 
		</div> 

		<div id='interview'> 
			<p> 
				Also, in Asymptotic analysis, we always talk about 
				input sizes larger than a constant value. It might 
				be possible that those large inputs are never given 
				to your software and an algorithm which is 
				asymptotically slower, always performs better for 
				your particular situation. So, you may end up choosing 
				an algorithm that is Asymptotically slower but faster 
				for your software. 
			</p> 
		</div> 

	</div> 
	<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
	</script> 
	<script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
	</script> 
	<script> 
		$(document).ready(function() { 
			$("#anekatorial").tabs({ 
					active: false, 
					collapsible: true 
				}) 
		}) 
	</script> 

</body> 

</html> 

Output :

Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery


Contoh 3 :

dalam contoh ini kita akan menonaktifkan tab. Kita dapat memilih untuk menonaktifkan tab tertentu atau semua tab dengan menggunakan opsi Disable. Pertama, kita menonaktifkan semua tab yang kita atur nilainya "true" untuk opsi Disable.

<html> 
  
<head> 
    <link href= 
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css' 
          rel='stylesheet'> 
</head> 
    <style> 
        b{ 
            float: right; 
            margin: 7px; 
            color: lime; 
        } 
          
        #anekatorial a:hover{ 
            color: lime; 
            background: gray; 
        } 
          
    </style> 
<body> 
    <br> 
    <br> 
    <div id="anekatorial"> 
        <ul> 
  
            <li><a href="#Algorithms">Algorithms</a></li> 
            <li><a href="#Data_Structure">Data Structure</a></li> 
            <li><a href="#Practice">Practice</a></li> 
            <li><a href="#interview">interview</a></li> 
              
            <b>Anekatoriak</b> 
        </ul> 
  
        <div id='Algorithms'> 
            <p> 
                The answer to this is simple, we can have all the  
                above things only if we have performance. So  
                performance is like currency through which we can 
                buy all the above things. Another reason  
                for studying performance is – speed is fun! 
            </p> 
        </div> 
  
        <div id='Data_Structure'> 
            <p> 
                For example, let us say, we want to store marks of  
                all students in a class, we can use an array to store 
                them. This helps in reducing the use of number of  
                variables as we don’t need to create a separate  
                variable for marks of every subject.  All marks can 
                be accessed by simply traversing the array. 
            </p> 
        </div> 
  
  
        <div id='Practice'> 
            <p> 
                Asymptotic Analysis is the big idea that handles  
                above issues in analyzing algorithms. In Asymptotic 
                Analysis, we evaluate the performance of an algorithm 
                in terms of input size (we don’t measure the actual  
                running time). We calculate, how does the time  
                (or space) taken by an algorithm increases with  
                the input size. 
            </p>     
        </div> 
  
        <div id='interview'> 
            <p> 
                Also, in Asymptotic analysis, we always talk about  
                input sizes larger than a constant value. It might  
                be possible that those large inputs are never given 
                to your software and an algorithm  which is  
                asymptotically slower, always performs better for  
                your particular situation. So, you may end up choosing 
                an algorithm that is Asymptotically slower but faster  
                for your software. 
            </p> 
        </div> 
  
  
    </div> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
    </script> 
    <script> 
        $(document).ready(function() { 
  
            $( "#anekatorial" ).tabs({ 
                disabled:true 
            }) 
  
        }) 
    </script> 
  
</body> 
</html>                

Output :

Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery


Contoh 4 :

dalam contoh ini kita akan menonaktifkan beberapa tab tertentu. Dalam kode di bawah ini kita menonaktifkan tab 1 dan 3 (0 nd 2nd dalam hal pengindeksan):

<html> 
  
<head> 
    <link href= 
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
        rel='stylesheet'> 
</head> 
    <style> 
        b{ 
            float: right; 
            margin: 7px; 
            color: lime; 
        } 
          
        #anekatorial a:hover{ 
            color: lime; 
            background: gray; 
        } 
          
    </style> 
<body> 
    <br> 
    <br> 
    <div id="anekatorial"> 
        <ul> 
  
            <li><a href="#Algorithms">Algorithms</a></li> 
            <li><a href="#Data_Structure">Data Structure</a></li> 
            <li><a href="#Practice">Practice</a></li> 
            <li><a href="#interview">interview</a></li> 
              
            <b>Anekatorial</b> 
        </ul> 
  
        <div id='Algorithms'> 
            <p> 
                The answer to this is simple, we can have all the  
                above things only if we have performance. So  
                performance is like currency through which we can 
                buy all the above things. Another reason  
                for studying performance is – speed is fun! 
            </p> 
        </div> 
  
        <div id='Data_Structure'> 
            <p> 
                For example, let us say, we want to store marks of  
                all students in a class, we can use an array to store 
                them. This helps in reducing the use of number of  
                variables as we don’t need to create a separate  
                variable for marks of every subject.  All marks can 
                be accessed by simply traversing the array. 
            </p> 
        </div> 
  
  
        <div id='Practice'> 
            <p> 
                Asymptotic Analysis is the big idea that handles  
                above issues in analyzing algorithms. In Asymptotic 
                Analysis, we evaluate the performance of an algorithm 
                in terms of input size (we don’t measure the actual  
                running time). We calculate, how does the time  
                (or space) taken by an algorithm increases with  
                the input size. 
            </p>     
        </div> 
  
        <div id='interview'> 
            <p> 
                Also, in Asymptotic analysis, we always talk about  
                input sizes larger than a constant value. It might  
                be possible that those large inputs are never given 
                to your software and an algorithm  which is  
                asymptotically slower, always performs better for  
                your particular situation. So, you may end up choosing 
                an algorithm that is Asymptotically slower but faster  
                for your software. 
            </p> 
        </div> 
  
  
    </div> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
    </script> 
    <script> 
        $(document).ready(function() { 
  
            $( "#anekatorial" ).tabs({ 
                active: 1, 
                disabled:[0, 2] 
            }) 
  
        }) 
    </script> 
  
</body> 
</html>  

Output :

Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery


Contoh 5 :

kita dapat memilih elemen yang akan dibuka secara default, juga secara default klik mouse event membuka tab, juga kita akan mengubahnya ke Mouse-Hover untuk membuka atau aktif tab itu

<html> 
<head> 
    <link href= 
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
        rel='stylesheet'> 
</head> 
    <style> 
        b{ 
            float: right; 
            margin: 7px; 
            color: lime; 
        } 
          
        #anekatorial a:hover{ 
            color: lime; 
            background: gray; 
        } 
          
    </style> 
<body> 
    <br> 
    <br> 
    <div id="anekatorial"> 
        <ul> 
  
            <li><a href="#Algorithms">Algorithms</a></li> 
            <li><a href="#Data_Structure">Data Structure</a></li> 
            <li><a href="#Practice">Practice</a></li> 
            <li><a href="#interview">interview</a></li> 
              
            <b>Anekatorial</b> 
        </ul> 
  
        <div id='Algorithms'> 
            <p> 
                The answer to this is simple, we can have all the  
                above things only if we have performance. So  
                performance is like currency through which we can 
                buy all the above things. Another reason  
                for studying performance is – speed is fun! 
            </p> 
        </div> 
  
        <div id='Data_Structure'> 
            <p> 
                For example, let us say, we want to store marks of  
                all students in a class, we can use an array to store 
                them. This helps in reducing the use of number of  
                variables as we don’t need to create a separate  
                variable for marks of every subject.  All marks can 
                be accessed by simply traversing the array. 
            </p> 
        </div> 
  
  
        <div id='Practice'> 
            <p> 
                Asymptotic Analysis is the big idea that handles  
                above issues in analyzing algorithms. In Asymptotic 
                Analysis, we evaluate the performance of an algorithm 
                in terms of input size (we don’t measure the actual  
                running time). We calculate, how does the time  
                (or space) taken by an algorithm increases with  
                the input size. 
            </p>     
        </div> 
  
        <div id='interview'> 
            <p> 
                Also, in Asymptotic analysis, we always talk about  
                input sizes larger than a constant value. It might  
                be possible that those large inputs are never given 
                to your software and an algorithm  which is  
                asymptotically slower, always performs better for  
                your particular situation. So, you may end up choosing 
                an algorithm that is Asymptotically slower but faster  
                for your software. 
            </p> 
        </div> 
  
    </div> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
    </script> 
    <script> 
        $(document).ready(function() { 
  
            $( "#anekatorial" ).tabs({ 
                event:'mouseover' 
            }) 
  
        }) 
    </script> 
  
</body> 
</html>     

Output :

Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery


Contoh 6 :

pada contoh ini kita akan mengubah tinggi halaman tab tergantung pada isi dari tab tersebut. Untuk melakukan itu kita akan diminta untuk menentukan min-height sesingkat yang Anda dapat menentukan. Dan properti overflow yang akan meningkatkan tinggi halaman tab tergantung pada konten.

<html> 
<head> 
    <link href= 
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-darkness/jquery-ui.css'
        rel='stylesheet'> 
</head> 
    <style> 
        b{ 
            float: right; 
            margin: 7px; 
            color: lime; 
        } 
          
        #anekatorial a:hover{ 
            color: lime; 
            background: gray; 
        } 
          
    </style> 
<body> 
    <br> 
    <br> 
    <div id="anekatorial"> 
        <ul> 
  
            <li><a href="#Algorithms">Algorithms</a></li> 
            <li><a href="#Data_Structure">Data Structure</a></li> 
            <li><a href="#Practice">Practice</a></li> 
            <li><a href="#interview">interview</a></li> 
              
            <b>Anekatorial</b> 
        </ul> 
  
        <div id='Algorithms'> 
            <p> 
                The answer to this is simple, we can have all the  
                above things only if we have performance. So  
                performance is like currency through which we can 
                buy all the above things. Another reason  
                for studying performance is – speed is fun! 
            </p> 
        </div> 
  
        <div id='Data_Structure'> 
            <p> 
                For example, let us say, we want to store marks of  
                all students in a class, we can use an array to store 
                them. This helps in reducing the use of number of  
                variables as we don’t need to create a separate  
                variable for marks of every subject.  All marks can 
                be accessed by simply traversing the array. 
            </p> 
        </div> 
  
  
        <div id='Practice'> 
            <p> 
                Asymptotic Analysis is the big idea that handles  
                above issues in analyzing algorithms. In Asymptotic 
                Analysis, we evaluate the performance of an algorithm 
                in terms of input size (we don’t measure the actual  
                running time). We calculate, how does the time  
                (or space) taken by an algorithm increases with  
                the input size. 
            </p>     
        </div> 
  
        <div id='interview'> 
            <p> 
                Also, in Asymptotic analysis, we always talk about  
                input sizes larger than a constant value. It might  
                be possible that those large inputs are never given 
                to your software and an algorithm  which is  
                asymptotically slower, always performs better for  
                your particular situation. So, you may end up choosing 
                an algorithm that is Asymptotically slower but faster  
                for your software. 
            </p> 
        </div> 
  
    </div> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> 
    </script> 
    <script> 
        $(document).ready(function() { 
            $("#anekatorial").tabs().css({ 
               'min-height': '100px', 
               'overflow': 'auto' 
            }); 
        }) 
    </script> 
  
</body> 
</html>    

Output :

Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery

Post a Comment for "Cara membuat Tabs sederhana dengan HTML, CSS dan jQuery"