I implemented a simple jQuery tab code that I found online to display dynamic content:
This is the code snippet that I inserted into the HEAD section of my HTML page:
<script src="js/jquery-1-9-1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide(); //hide
$('#tabs div:first').show(); //show
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide(); //hide
$(currentTab).show(); //show
return false;
});
});
</script>
Furthermore, I defined some styling rules in my CSS file:
/*TAB MEDIA k-enkripsi*/
.tab-wrapper { background:#fcf;
width: 768px; height:885px; bottom:0;
margin:0 auto;
}
/* TAB WRAP CONTENT */
#tabs {
width: 100%; height: 150px;
margin: 0 auto;
}
/* Dynamic TAB Content Section */
#tabs div {
width: 100%; height:150px;
margin:0px;
clear: both;
}
/* Rest of the CSS styling rules omitted for brevity */
Finally, I added the following HTML snippet in order to render the content tabs:
<!-- TabMedia-enkripsi1 -->
<div class="tab-wrapper">
<div id="tabs">
<div id="tab-1" class="animated fadeIn">
<div class="tab-img"></div>
<p class="for-tab">Content for Tab 1 here...</p>
</div>
<!-- Tabs for other sections omitted for brevity -->
<ul>
<li><a href="#tab-1">1</a></li>
<li><a href="#tab-2">2</a></li>
<li><a href="#tab-3">3</a></li>
<li><a href="#tab-4">4</a></li>
</ul>
</div> <!-- tabs -->
</div> <!-- tab-wrapper -->
After testing this implementation in Safari and Firefox, I encountered an issue where the 'tab-img' class was not rendered as expected. Despite trying different elements like div or span with classes, only text-based tags like P and H1 worked properly. This made it difficult for me to incorporate images or animated content within the tabs.
If anyone could provide insight on what might be missing from the code, I would greatly appreciate it.