מערכת לשוניות לדפדוף בין תכנים באמצעות jQuery
הסקריפט המצורף יוצר מערכת טאבים (לשוניות) באמצעות jQuery.
היכנסו כדי לראות את הסקריפט בפעולה:
ה-HTML
ה-HTML מורכב משלושה דיבים השייכים למחלקה article. כל דיב כזה מכיל את כל המידע הדרוש לבניית הלשוניות.
article_tab מכיל את הכיתוב שיופיע על גבי הלשונית.
tab_content מכיל את התוכן שמקושר עם כל אחת מהלשוניות, וזה כולל כותרת ופסקאות.
<!DOCTYPE html>
<html lang="he-IL">
<head>
<meta charset="utf-8">
</head>
<body dir="rtl">
<div id="wrapper">
<div id="tabs"></div>
<div id="tabs_content">
<div class="article">
<div class="article_tab">לשונית ראשונה</div>
<div class="tab_content">
<h2 class="article_title">כותרת 1</h2>
<div class="article_content">
תוכן ראשון...תוכן ראשון...תוכן
</div>
</div>
</div>
<div class="article">
<div class="article_tab">לשונית שנייה</div>
<div class="tab_content">
<h2 class="article_title">כותרת 2</h2>
<div class="article_content">
תוכן שני...תוכן שני...תוכן
</div>
</div>
</div>
<div class="article">
<div class="article_tab">לשונית שלישית</div>
<div class="tab_content">
<h2 class="article_title">כותרת 3</h2>
<div class="article_content">
תוכן שלישי...תוכן שלישי...תוכן
</div>
</div>
</div>
</div>
</div>
</body>
</html>
הדיב tabs הוא ריק כרגע, וקוד ה-jQuery בהמשך יוסיף לו את הלשוניות.
ה-jQuery
הסקריפט, אוסף את הלשוניות לתוך מערך tabs, ובונה ממנו דיב עם מזהה ייחודי tabs. בלחיצה על כל לשונית, מוסתרים כל התכנים ומוצג רק התוכן שקשור בלשונית המסוימת, שנבחרה.
<script>
(function($) {
$(document).ready(function() {
// אוסף את הכיתוב ללשוניות לתוך מערך
var i = 0;
var tabs = new Array();
$('.article').each(function(index, value) {
var article = $(this);
var tab = $(this).children('.article_tab');
tabs[i] = tab;
var content = $(this).children('.tab_content');
// מסתיר את התכנים מלבד התוכן הראשון
if(index > 0){
content.hide();
}
i++;
});
// בונה את הלשוניות
var build = '';
$.each(tabs, function(index, value) {
build += '<a href="#" data-num="'+index+'">'+value.text()+'</a>';
});
var tabs_div = $('#tabs');
tabs_div.html(build);
// מאזין ללשוניות, ומציג את התוכן לפי בחירת המשתמש
tabs_div.on('click', 'a', function(event){
event.preventDefault();
var link = $(this).css('border-bottom', '1px solid #fafbfd');
link.siblings('a').css('border-bottom', '1px solid #babbbd');
var num = link.data('num') + 1;
var current = $('#tabs_content .article:nth-child('+num+')');
current.siblings('.article').find('.tab_content').hide();
current.find('.tab_content').show();
});
});
})(jQuery);
</script>
ה-CSS
<style>
body{font-family: arial, sans-serif; color: #504e4f;}
.article_tab{display: none;}
#wrapper{width: 600px; margin: 10px auto; padding-top: 30px;}
#tabs{margin-bottom: 4px;}
#tabs a{color: #555555; background: #fafbfd;
font-weight: bold; text-decoration: none; border: 1px solid #babbbd;
border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px;
padding: 5px 10px; z-index: 10;
}
#tabs a:nth-child(1){border-bottom: 1px solid #fafbfd;}
#tabs_content{margin-top: 0px; border: 1px solid #babbbd;}
.article{width: 550px; margin-right: auto; margin-left: auto;}
h2.article_title{padding-top: 25px; margin-top: 0; color: #3169a4;}
.article_content{padding-bottom: 30px;}
</style>
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים