Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите настроить мульти вкладки (https://javascript.ru/forum/dom-window/85354-pomogite-nastroit-multi-vkladki.html)

WebMachine 09.07.2023 20:22
Помогите настроить мульти вкладки
 
Ребята. Помогите сделать правильно.

Код: https://jsfiddle.net/Georka/eo5uzt9r/10/

Есть 6 ссылок: A, A1, A2, A3, B, C

Задача:
- при клике на А или А1, отображать 5 секций с id: a1Section1, a1Section2, a1Section3, a1Section4, a1Section5.

- при клике на А2, отображать 5 секций с id: a2Section1, a2Section2, a2Section3, a2Section4, a2Section5.

- при клике на А3, отображать 5 секций с id: a3Section1, a3Section2, a3Section3, a3Section4, a3Section5.

- при клике на B, отображать 5 секций с id: bSection1, bSection2, bSection3, bSection4, bSection5.

- при клике на C, отображать 5 секций с id: cSection1, cSection2, cSection3, cSection4, cSection5.

Остальные секции которые не принадлежат кнопке, должны быть скрыты.

voraa 09.07.2023 20:41 
function showSection(section){
    for(i=1; i<=5; i++){
        if(section == section){
            // section[i].classList.add('show', 'active');
            console.log(section+[i]);
        } else {
            // section[i].classList.remove('show', 'active');
            console.log(section+[i]);
        }
    }
}

Интересное условие
if(section == section)
Зачем section+[i], а не section+i

WebMachine 09.07.2023 20:48
Цитата:
Сообщение от voraa (Сообщение 552697)
Зачем section+[i], а не section+i
https://jsfiddle.net/Georka/eo5uzt9r/10/

Все равно не работает. В консоли норм. А section+i.classList.add('show', 'active') - не работает. Выдаёт ошибку: Cannot read properties of undefined (reading 'add')

voraa 09.07.2023 20:58 
<head>
<style>
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 400;
    background: #fff;
    padding: 0;
    margin: 15px;
}

ul {
  display: inline;
  margin-bottom: 20px;
  padding: 0;
}

ul li{
  display: inline-block;
  background: #eee;
}

ul li a{
  padding: 10px 15px;
}

.content div .active{
  display: block;
}

.content div:not(.active){
  display: none;
}
</style>
</head>
<body>
<ul>
    <li class="li"><a href="#" id="buttonLinkA">A</a></li>
    <ul>
        <li class="li"><a href="#" id="buttonLinkA1">A1</a></li>
        <li class="li"><a href="#" id="buttonLinkA2">A2</a></li>
        <li class="li"><a href="#" id="buttonLinkA3">A3</a></li>
    </ul>
    <li><a href="#" id="buttonLinkB">B</a></li>
    <li><a href="#" id="buttonLinkC">C</a></li>
</ul>
<div class="content">
    <div id="a1Section1">a1Section1</div>
    <div id="a1Section2">a1Section2</div>
    <div id="a1Section3">a1Section3</div>
    <div id="a1Section4">a1Section4</div>
    <div id="a1Section5">a1Section5</div>
    
    <div id="a2Section1">a2Section1</div>
    <div id="a2Section2">a2Section2</div>
    <div id="a2Section3">a2Section3</div>
    <div id="a2Section4">a2Section4</div>
    <div id="a2Section5">a2Section5</div>

    <div id="a3Section1">a3Section1</div>
    <div id="a3Section2">a3Section2</div>
    <div id="a3Section3">a3Section3</div>
    <div id="a3Section4">a3Section4</div>
    <div id="a3Section5">a3Section5</div>

    <div id="bSection1">bSection1</div>
    <div id="bSection2">bSection2</div>
    <div id="bSection3">bSection3</div>
    <div id="bSection4">bSection4</div>
    <div id="bSection5">bSection5</div>

    <div id="cSection1">cSection1</div>
    <div id="cSection2">cSection2</div>
    <div id="cSection3">cSection3</div>
    <div id="cSection4">cSection4</div>
    <div id="cSection5">cSection5</div>
</div>

<script>
const sections = [
	[a1Section1, a1Section2, a1Section3, a1Section4, a1Section5],
	[a1Section1, a1Section2, a1Section3, a1Section4, a1Section5],
	[a2Section1, a2Section2, a2Section3, a2Section4, a2Section5],
	[a3Section1, a3Section2, a3Section3, a3Section4, a3Section5],
	[bSection1, bSection2, bSection3, bSection4, bSection5],
	[cSection1, cSection2, cSection3, cSection4, cSection5]	
];

buttonLinkA.addEventListener('click', function(e){
    showSection(0);
    //locPushState('#a');
    e.preventDefault();
});
buttonLinkA1.addEventListener('click', function(e){
    showSection(1);
    //locPushState('#a1');
    e.preventDefault();
});
buttonLinkA2.addEventListener('click', function(e){
    showSection(2);
    //locPushState('#a2');
    e.preventDefault();
});
buttonLinkA3.addEventListener('click', function(e){
    showSection(3);
    //locPushState('#a3');
    e.preventDefault();
});
buttonLinkB.addEventListener('click', function(e){
    showSection(4);
    //locPushState('#b');
    e.preventDefault();
});
buttonLinkC.addEventListener('click', function(e){
    showSection(5)
    //locPushState('#c');
    e.preventDefault();
});

function showSection(numsect){
	sections.flat().forEach(sec => sec.classList.remove('show', 'active'));
	sections[numsect].forEach(sec => sec.classList.add('show', 'active'));
}
</script>
</body>

voraa 09.07.2023 21:03
Цитата:
Сообщение от WebMachine
А section+i.classList.add('show', 'active') - не работает. Выдаёт ошибку: Cannot read properties of undefined (reading 'add')
section - строка i - число.
section+i - строка
У строки нет свойства classList

WebMachine 09.07.2023 21:07
Цитата:
Сообщение от voraa (Сообщение 552700)
Решение
Ого), очень крутое решение. Спасибо вам огромное мистер)

WebMachine 09.07.2023 21:09
Цитата:
Сообщение от voraa (Сообщение 552701)
section - строка i - число.
section+i - строка
У строки нет свойства classList
Так вот почему выдавало ошибку. Теперь всё ясно. Спасибо ещё раз. Вы очень помогли.

voraa 09.07.2023 21:12
Можно еще немного сократить
<head>
<style>
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 400;
    background: #fff;
    padding: 0;
    margin: 15px;
}

ul {
  display: inline;
  margin-bottom: 20px;
  padding: 0;
}

ul li{
  display: inline-block;
  background: #eee;
}

ul li a{
  padding: 10px 15px;
}

.content div .active{
  display: block;
}

.content div:not(.active){
  display: none;
}
</style>
</head>
<body>
<ul>
    <li class="li"><a href="#" id="buttonLinkA">A</a></li>
    <ul>
        <li class="li"><a href="#" id="buttonLinkA1">A1</a></li>
        <li class="li"><a href="#" id="buttonLinkA2">A2</a></li>
        <li class="li"><a href="#" id="buttonLinkA3">A3</a></li>
    </ul>
    <li><a href="#" id="buttonLinkB">B</a></li>
    <li><a href="#" id="buttonLinkC">C</a></li>
</ul>
<div class="content">
    <div id="a1Section1">a1Section1</div>
    <div id="a1Section2">a1Section2</div>
    <div id="a1Section3">a1Section3</div>
    <div id="a1Section4">a1Section4</div>
    <div id="a1Section5">a1Section5</div>
    
    <div id="a2Section1">a2Section1</div>
    <div id="a2Section2">a2Section2</div>
    <div id="a2Section3">a2Section3</div>
    <div id="a2Section4">a2Section4</div>
    <div id="a2Section5">a2Section5</div>

    <div id="a3Section1">a3Section1</div>
    <div id="a3Section2">a3Section2</div>
    <div id="a3Section3">a3Section3</div>
    <div id="a3Section4">a3Section4</div>
    <div id="a3Section5">a3Section5</div>

    <div id="bSection1">bSection1</div>
    <div id="bSection2">bSection2</div>
    <div id="bSection3">bSection3</div>
    <div id="bSection4">bSection4</div>
    <div id="bSection5">bSection5</div>

    <div id="cSection1">cSection1</div>
    <div id="cSection2">cSection2</div>
    <div id="cSection3">cSection3</div>
    <div id="cSection4">cSection4</div>
    <div id="cSection5">cSection5</div>
</div>

<script>
const sections = [
	[a1Section1, a1Section2, a1Section3, a1Section4, a1Section5],
	[a1Section1, a1Section2, a1Section3, a1Section4, a1Section5],
	[a2Section1, a2Section2, a2Section3, a2Section4, a2Section5],
	[a3Section1, a3Section2, a3Section3, a3Section4, a3Section5],
	[bSection1, bSection2, bSection3, bSection4, bSection5],
	[cSection1, cSection2, cSection3, cSection4, cSection5]	
];

const buttons = [buttonLinkA, buttonLinkA1, buttonLinkA2, buttonLinkA3, buttonLinkB, buttonLinkC];

buttons.forEach((but, i) => {
	but.addEventListener('click', function(e){
		showSection(i);
		//locPushState('#a');
		e.preventDefault();
	});
})

function showSection(numsect){
	sections.flat().forEach(sec => sec.classList.remove('show', 'active'));
	sections[numsect].forEach(sec => sec.classList.add('show', 'active'));
}
</script>
</body>


ЗЫ jsfiddle.net не работает в РФ. VPN приходится включать.

WebMachine 09.07.2023 21:30
Цитата:
Сообщение от voraa (Сообщение 552704)
Можно еще немного сократить
А можно заменить section+i так чтобы свойство classList на него действовало?
Пробовал:
let temp = section+i;
temp .classList.add('show', 'active');

Но всё равно ошибка

voraa 09.07.2023 22:49
Доступ к глобальным переменным возможен через window
Если глобальная переменная задана через var например
var globx;
то к ней можно обратится
window['globx']

Попробуйте
window[section+i].classList.add('show', 'active');


Часовой пояс GMT +3, время: 23:41.