Задать вопрос
ElizavetaKrasova
@ElizavetaKrasova
javascript

Как можно оптимизировать и сократить данный код?

Всем добрый день.
Возможно кто-то сможет помочь в оптимизации и сокращении данного, мягко говоря не лучшего, кода?
Суть данного кода такая, что существует 4 кнопки и соответственно 4 блока, которые открываются по нажатию каждой из кнопок. Класс active подсвечивает активную кнопку. При клике на другую кнопку должен открываться другой блок и подсвечиваться нажатая кнопка.

function showhide(id, id_block) {
       	var e = document.getElementById(id);
		   if(id == 'text-source-1')
		   {
			   $(".menu-source li").removeClass('active');
			   document.getElementById('text-source-2').style.display='none';
			   document.getElementById('text-source-3').style.display='none';
			   document.getElementById('text-source-4').style.display='none';
		   }
		 
		   if(id == 'text-source-2')
			{
				$(".menu-source li").removeClass('active');
				document.getElementById('text-source-1').style.display='none';
				document.getElementById('text-source-3').style.display='none';
				document.getElementById('text-source-4').style.display='none';
			}
			
			if(id == 'text-source-3')
			{
				$(".menu-source li").removeClass('active');
				document.getElementById('text-source-1').style.display='none';
				document.getElementById('text-source-2').style.display='none';
				document.getElementById('text-source-4').style.display='none';
			}
			
			if(id == 'text-source-4')
			{
				$(".menu-source li").removeClass('active');
				document.getElementById('text-source-1').style.display='none';
				document.getElementById('text-source-3').style.display='none';
				document.getElementById('text-source-2').style.display='none';
			}

	var b = document.getElementById(id_block);
        e.style.display = (e.style.display == 'block') ? '' : 'block';
	if(b.classList.contains('active')){
		b.classList.remove('active'); }
	else {
        b.classList.add('active');} 
	}
  • Вопрос задан
  • 88 просмотров
4 комментария
Подписаться 1 Простой 4 комментария
Решения вопроса 2
OTCloud
@OTCloud
Программирование и Архитектура ПО
Не могу сказать что этот пример хорошо реализован, однако вам стоит смотреть в сторону табов. Код с добавлением класса active можно исключить прописав в css стили примерно так:
.my-container-class[data-toggle="true"] { background: red }
.my-container-class[data-toggle="false"] { background: none }


Ответ написан
2 комментария
2 комментария
KickeRocK
@KickeRocK
FrontFinish
Для вашего примера, но я бы поменял разметку
$('.menu-source li a').click((e)=>{
e.preventDefault();
let listId = $(this).closest('li').attr('id');
$('.menu-source li').removeClass('active');
$(this).closest('li').addClass('active');
$(`[id^="text-source"]`).removeClass('shown');
$(`[id="text-${listId}"]`).addClass('shown');
});
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Ещё заказы