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

Question

[Елизавета Красова]

Всем добрый день.
Возможно кто-то сможет помочь в оптимизации и сокращении данного, мягко говоря не лучшего, кода?
Суть данного кода такая, что существует 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');} 
	}

Comments

[Andrew]

Разметку покажите

[Елизавета Красова]

Andrew,

<div class="menu-source">
    <ul>
    <li id="source-1" class="active"><a href="javascript:showhide('text-source-1', 'source-1')">Head1</a></li>
    <li id="source-2"><a href="javascript:showhide('text-source-2', 'source-2')">Head2</a></li>
    <li id="source-3"><a href="javascript:showhide('text-source-3', 'source-3')">Head3</a></li>
    <li id="source-4"><a href="javascript:showhide('text-source-4', 'source-4')">Head4</a></li>
    </ul>
    <hr />
    <div id="text-source-1" style="display: block;"> txt1 </div>
    <div id="text-source-2"> txt2 </div>
    <div id="text-source-3"> txt3 </div>
    <div id="text-source-4"> txt3 </div>
</div>

[Сергей c0re]

Вот не понимаю... вы либо на нативном JS пишите либо на JQuery, зачем все перемешивать??

[Lord_Dantes]

То что вы сделали называется табы их много примеров есть на кодпене и в интернете

Answer 1

[Алексей Юдов]

Не могу сказать что этот пример хорошо реализован, однако вам стоит смотреть в сторону табов. Код с добавлением класса active можно исключить прописав в css стили примерно так:

.my-container-class[data-toggle="true"] { background: red }
.my-container-class[data-toggle="false"] { background: none }

Comments

[Елизавета Красова]

Спасибо большое, то что нужно. Теперь буду знать хоть как это называется :)

[Алексей Юдов]

ElizavetaKrasova, UI components

Answer 2

[Andrew]

Для вашего примера, но я бы поменял разметку

$('.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');
});

Comments

[Елизавета Красова]

Спасибо большое за помощь