23.11.2017, 15:37
|
 |
Интересующийся
|
|
Регистрация: 23.11.2017
Сообщений: 22
|
|
|
переключение вкладок с помощью кнопки
Коллеги, добрый день! Стоит задача сделать так, чтобы вкладки реализованные с помощью элементов type="radio", переключались с помощью кнопки. Всего есть три таких вкладки и одна кнопка!!
<input type="button" name="button" id="button_pdt" value="Товары" onclick="change()"/>
<input class="tab_pdt" id="tab1" type="radio" name="tabs" checked>
это вот собственно сами книпки и вкладки, нужно реализовать функцию change();
Помогите кто чем может! Чувствую , что это просто но додуматься не могу   |
|
23.11.2017, 15:56
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
<input type="button" name="button" id="button_pdt" value="Товары" onclick="change()"/>
<input class="tab_pdt" id="tab1" type="radio" name="tabs" checked>
<input class="tab_pdt" id="tab2" type="radio" name="tabs">
<input class="tab_pdt" id="tab3" type="radio" name="tabs">
<input class="tab_pdt" id="tab4" type="radio" name="tabs">
<input class="tab_pdt" id="tab5" type="radio" name="tabs">
<style>input{display:block;}</style>
<script>
function change(){
var inputs=document.querySelectorAll('.tab_pdt'),
active=Math.floor(Math.random()*inputs.length);
[].forEach.call(inputs,function(input,i){
input.checked=i==active;
});
}
</script>
|
|
23.11.2017, 16:31
|
|
Интересующийся
|
|
Регистрация: 23.11.2017
Сообщений: 22
|
|
active=Math.floor(Math.random()*inputs.length) я так понимаю, эта строчка рандомно переключает кнопки? можно же переключать 1 2 3 1 2 3 и как если можно? |
|
23.11.2017, 16:38
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Влад137,
<input type="button" name="button" id="button_pdt" value="Товары" onclick="change()"/>
<input class="tab_pdt" id="tab1" type="radio" name="tabs" checked>
<input class="tab_pdt" id="tab2" type="radio" name="tabs">
<input class="tab_pdt" id="tab3" type="radio" name="tabs">
<input class="tab_pdt" id="tab4" type="radio" name="tabs">
<input class="tab_pdt" id="tab5" type="radio" name="tabs">
<style>input{display:block;}</style>
<script>
var active = 0, inputs=document.querySelectorAll('.tab_pdt');
function change(){
active= ++active % inputs.length;
inputs[active].checked = true
}
</script>
|
|
23.11.2017, 16:45
|
|
Интересующийся
|
|
Регистрация: 23.11.2017
Сообщений: 22
|
|
|
рони,
переключает на вторую и всё, на третью уже не хочет(((
|
|
23.11.2017, 16:59
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Влад137,
здесь код работает?
|
|
23.11.2017, 21:43
|
|
Интересующийся
|
|
Регистрация: 23.11.2017
Сообщений: 22
|
|
|
рони,
здесь код работает!)))
|
|
23.11.2017, 21:49
|
|
Интересующийся
|
|
Регистрация: 23.11.2017
Сообщений: 22
|
|
рони,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Главное окно</title>
<style type="text/css" media="screen">
/* Базовый контейнер табов */
.tabs {
min-width: 320px;
max-width: 800px;
padding: 0px;
margin: 50px;
}
/* Стили секций с содержанием */
.tabs>section {
display: none;
padding: 15px;
background: #fff;
border: 1px solid #000;
}
.tabs>section>p {
margin: 0 0 15px;
line-height: 1.5;
color: black;
}
/* Прячем чекбоксы */
.tabs>input {
display: block;
position: absolute;
}
/* Стили переключателей вкладок (табов) */
.tabs>label {
display: inline-block;
margin: 0 0 1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #aaa;
border: 0px solid #ddd;
border-width: 1px 1px 1px 1px;
background: white;
/*border-radius: 3px 3px 0 0;*/
}
/* Изменения стиля переключателей вкладок при наведении */
.tabs>label:hover {
color: #888;
cursor: pointer;
}
/* Стили для активной вкладки */
.tabs>input:checked+label {
color: #555;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #fff;
}
/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
display: block;
}
</style>
<script src='ТестовоеЗадание.js'></script>
</head>
<body>
<input type="button" name="button" id="button_pdt" value="Товары" onclick="change()"/>
<div class="tabs">
<input class="tab_pdt" id="tab1" type="radio" name="tabs" checked>
<label for="tab1" title="Товар 1">Товары 1</label>
<input class="tab_pdt" id="tab2" type="radio" name="tabs">
<label for="tab2" title="Товар 2">Товары 2</label>
<input class="tab_pdt" id="tab3" type="radio" name="tabs">
<label for="tab3" title="Товар 3">Товары 3</label>
<section id="content-tab1">
<p>Список товаров</p>
<p>
<label for="id_search">Фильтр по ИД:</label>
<input type="search" name="search" id="id_search">
</p>
<p>
<label for="id_search">Фильтр по имени:</label>
<input type="search" name="search" id="id_search">
</p>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th id="ID">ID</th>
<th id="idPdt">Имя</th>
<th id="pdtDescriprion">Описание</th>
<th id="pdtPrice">Цена</th>
<th id="pdtQuantity">Количество</th>
</tr>
<tr>
<td>1</td>
<td><a href="Карточка товара.html">Ноутбук Lenovo</a></td>
<td>Ноутбук ThinkPad T460 14"FHD(1920x1080),i5-6200U(2,3GHz),4Gb,500GB@5400+8Gb cache, HD Graphics 520, WiFi,BT,TPM,FPR,WWAN ready,3cell+3cell,Cam,Win7 Pro 64 + Win10 Pro upgrade coupon,1,7kg, 3y OS</td>
<td>100</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">Клавиатура OKLICK</a></td>
<td>Клавиатура OKLICK 140M, USB, черный</td>
<td>50</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td><a href="#">Сетевой адаптер</a></td>
<td>Сетевой адаптер WiFi D-Link DWA-582 DWA-582/RU</td>
<td>7</td>
<td>0</td>
</tr>
</table>
</section>
<section id="content-tab2">
<p>
2 товар 2
</p>
</section>
<section id="content-tab3">
<p>
3 товар 3
</p>
</section>
</div>
<input type="button" name="button" id="exit_button" value="Выход" onclick="exit()" />
</body>
</html>
блин не получается у меня! подскажи пожалуйста, если не трудно!)
|
|
23.11.2017, 22:54
|
|
Интересующийся
|
|
Регистрация: 23.11.2017
Сообщений: 22
|
|
|
рони,
всёёёёё, я сделяль)) СПасибо большое за помощь!)))
|
|
23.11.2017, 23:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Влад137,
в строке 70 ещё нет элементов с которыми работает скрипт.
нужно дождаться загрузки страницы.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Главное окно</title>
<style type="text/css" media="screen">
/* Базовый контейнер табов */
.tabs {
min-width: 320px;
max-width: 800px;
padding: 0px;
margin: 50px;
}
/* Стили секций с содержанием */
.tabs>section {
display: none;
padding: 15px;
background: #fff;
border: 1px solid #000;
}
.tabs>section>p {
margin: 0 0 15px;
line-height: 1.5;
color: black;
}
/* Прячем чекбоксы */
.tabs>input {
display: block;
position: absolute;
}
/* Стили переключателей вкладок (табов) */
.tabs>label {
display: inline-block;
margin: 0 0 1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #aaa;
border: 0px solid #ddd;
border-width: 1px 1px 1px 1px;
background: white;
/*border-radius: 3px 3px 0 0;*/
}
/* Изменения стиля переключателей вкладок при наведении */
.tabs>label:hover {
color: #888;
cursor: pointer;
}
/* Стили для активной вкладки */
.tabs>input:checked+label {
color: #555;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #fff;
}
/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
display: block;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var active = 0, inputs=document.querySelectorAll('.tab_pdt');
document.querySelector('#button_pdt').addEventListener('click', function() {
active= ++active % inputs.length;
inputs[active].checked = true
})
});
</script>
</head>
<body>
<input type="button" name="button" id="button_pdt" value="Товары" />
<div class="tabs">
<input class="tab_pdt" id="tab1" type="radio" name="tabs" checked>
<label for="tab1" title="Товар 1">Товары 1</label>
<input class="tab_pdt" id="tab2" type="radio" name="tabs">
<label for="tab2" title="Товар 2">Товары 2</label>
<input class="tab_pdt" id="tab3" type="radio" name="tabs">
<label for="tab3" title="Товар 3">Товары 3</label>
<section id="content-tab1">
<p>Список товаров</p>
<p>
<label for="id_search">Фильтр по ИД:</label>
<input type="search" name="search" id="id_search">
</p>
<p>
<label for="id_search">Фильтр по имени:</label>
<input type="search" name="search" id="id_search">
</p>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th id="ID">ID</th>
<th id="idPdt">Имя</th>
<th id="pdtDescriprion">Описание</th>
<th id="pdtPrice">Цена</th>
<th id="pdtQuantity">Количество</th>
</tr>
<tr>
<td>1</td>
<td><a href="Карточка товара.html">Ноутбук Lenovo</a></td>
<td>Ноутбук ThinkPad T460 14"FHD(1920x1080),i5-6200U(2,3GHz),4Gb,500GB@5400+8Gb cache, HD Graphics 520, WiFi,BT,TPM,FPR,WWAN ready,3cell+3cell,Cam,Win7 Pro 64 + Win10 Pro upgrade coupon,1,7kg, 3y OS</td>
<td>100</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">Клавиатура OKLICK</a></td>
<td>Клавиатура OKLICK 140M, USB, черный</td>
<td>50</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td><a href="#">Сетевой адаптер</a></td>
<td>Сетевой адаптер WiFi D-Link DWA-582 DWA-582/RU</td>
<td>7</td>
<td>0</td>
</tr>
</table>
</section>
<section id="content-tab2">
<p>
2 товар 2
</p>
</section>
<section id="content-tab3">
<p>
3 товар 3
</p>
</section>
</div>
<input type="button" name="button" id="exit_button" value="Выход" onclick="exit()" />
</body>
</html>
|
|
|
|
