Три опции за създаване на компонент за превключване на съдържание jQuery, JS, CSS

Не много отдавна един мой приятел създаде UI компонент, за да промени съдържанието на страницата въз основа на елемент

Вариант 1 Съдържание

Вариант 2 Съдържание

Вариант 3 Съдържание

jQuery код за превключване на съдържание след малко оптимизация:

И така, какво става тук?

Горната функция jQuery търси всички блокове със съдържание, които имат клас "jqueryOptions" и ги скрива от изгледа.

След това, когато потребителят избере елемент от елемента за избор (с идентификатора 'select'), функцията затваря всички потенциално отворени блокове със съдържание, използвайки метода jQuery .slideUp (), и след това отваря избрания от нас блок с помощта на slideDown (). Това се прави, като се избере опцията на елемента select (чрез ключовата дума this) и се намери елемент с името на класа, който съответства на стойността "this".

Не е твърде трудно?

Така че защо да не го оставите така, както е?

Проблемът е, че за толкова малка функционалност трябваше да заредим библиотеката jQuery (компресирана до 98KB). Можехме да се справим по-добре.

Първо, нека помислим какво трябва да се направи, за да се пресъздаде този ефект.

• Съдържанието трябва да бъде скрито по подразбиране;
• След промяна на елемента на избрания елемент, трябва да покажем избраното съдържание;
• След промяна на елемента на елемента за избор скрийте цялото останало съдържание.

Има още няколко подробности, но ние ще ги разкрием, докато пишем кода. Така че първата точка, която можем да приложим с CSS, за да можем да я зачеркнем. Двама останали.

Първо, нека създадем няколко променливи:

След това трябва да напишем няколко функции, където ще взаимодействаме с променливите, декларирани по-горе.

Първо, нека приложим скриването на съдържанието на страницата, когато избираме нова стойност за елемента select. За целта ще създадем функция:

Функцията clearShow () работи по следния начин: първо, тя взема променливата на панелите (която е списък на всички блокове на страницата с класа “options”), итерира над всеки един (три в случая) и премахва “ шоу ”клас.

Клас "show" - отговорен за показване на съдържание на нашата страница.

Сега, когато имаме начин да премахнем класа „show“ от всеки блок със съдържание, имаме нужда от функционалност, която ще направи обратното:

Функцията addShow () приема аргумент, наречен showThis, и добавя към него клас “show” със същото име като избраната стойност в полето за избор. Сега трябва да предадем стойността showThis за addShow () .

Функцията vUpdate () се изпълнява всеки път, когато елемент в елемента за избор се актуализира (наблюдава се от събитието за промяна):

---