Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.11.2017, 14:37
Аватар для Влад137
Интересующийся
Отправить личное сообщение для Влад137 Посмотреть профиль Найти все сообщения от Влад137
 
Регистрация: 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();

Помогите кто чем может! Чувствую , что это просто но додуматься не могу
Ответить с цитированием
  #2 (permalink)  
Старый 23.11.2017, 14:56
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,600

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 23.11.2017, 15:31
Аватар для Влад137
Интересующийся
Отправить личное сообщение для Влад137 Посмотреть профиль Найти все сообщения от Влад137
 
Регистрация: 23.11.2017
Сообщений: 22

active=Math.floor(Math.random()*inputs.length) я так понимаю, эта строчка рандомно переключает кнопки? можно же переключать 1 2 3 1 2 3 и как если можно?
Ответить с цитированием
  #4 (permalink)  
Старый 23.11.2017, 15:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,781

Влад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>
Ответить с цитированием
  #5 (permalink)  
Старый 23.11.2017, 15:45
Аватар для Влад137
Интересующийся
Отправить личное сообщение для Влад137 Посмотреть профиль Найти все сообщения от Влад137
 
Регистрация: 23.11.2017
Сообщений: 22

рони,
переключает на вторую и всё, на третью уже не хочет(((
Ответить с цитированием
  #6 (permalink)  
Старый 23.11.2017, 15:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,781

Влад137,
здесь код работает?
Ответить с цитированием
  #7 (permalink)  
Старый 23.11.2017, 20:43
Аватар для Влад137
Интересующийся
Отправить личное сообщение для Влад137 Посмотреть профиль Найти все сообщения от Влад137
 
Регистрация: 23.11.2017
Сообщений: 22

рони,
здесь код работает!)))
Ответить с цитированием
  #8 (permalink)  
Старый 23.11.2017, 20:49
Аватар для Влад137
Интересующийся
Отправить личное сообщение для Влад137 Посмотреть профиль Найти все сообщения от Влад137
 
Регистрация: 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>


блин не получается у меня! подскажи пожалуйста, если не трудно!)
Ответить с цитированием
  #9 (permalink)  
Старый 23.11.2017, 21:54
Аватар для Влад137
Интересующийся
Отправить личное сообщение для Влад137 Посмотреть профиль Найти все сообщения от Влад137
 
Регистрация: 23.11.2017
Сообщений: 22

рони,
всёёёёё, я сделяль)) СПасибо большое за помощь!)))
Ответить с цитированием
  #10 (permalink)  
Старый 23.11.2017, 22:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,781

Влад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, &nbsp;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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переключение div-блоков с помощью radio кнопок Jeick9 Events/DOM/Window 1 10.03.2015 04:50
как с помощью animate() создать движение кнопки в правый верхний угол? katiandra4ka jQuery 1 19.05.2014 21:25
Изменение вкладок ui tabs по нажатию кнопки назад в браузере martinss jQuery 0 15.01.2014 10:46
prompt,открытие нового окна с помощью кнопки Ксения7595 Элементы интерфейса 3 29.05.2013 14:28
Анимированные кнопки с помощью jQuery a_c jQuery 9 11.04.2011 17:55