Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2013, 09:51
Новичок на форуме
Отправить личное сообщение для Densofting Посмотреть профиль Найти все сообщения от Densofting
 
Регистрация: 13.02.2013
Сообщений: 4

Скрытие-показ кнопок в меню
День добрый. Не могу найти решение вопроса, а из-за хронического недосыпа разумные варианты не приходят в голову.

Есть меню подобной структуры:
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>


Нужно сделать так, чтоб в меню отображались только две кнопки.
Если мы находимся на вкладке "1", то видим кнопки "2" и "3".
Если на вкладке "2", то "1" и "3".
И если на вкладке "3", то "1" и "2".

Помогите, пожалуйста, с решением или направьте в правильное русло.
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2013, 10:15
Новичок на форуме
Отправить личное сообщение для Densofting Посмотреть профиль Найти все сообщения от Densofting
 
Регистрация: 13.02.2013
Сообщений: 4

Примерно так должно работать:
<ul>
      <li><a href="#" id="h1" style="display: none;">1</a></li>
      <li><a href="#" id="h2">2</a></li>
      <li><a href="#" id="h3">3</a></li>
      <li><a href="#" id="h4">4</a></li>
      <li><a href="#" id="h5">5</a></li>
    </ul>
        
    <script>
      document.getElementById('h1').onclick = function() {
        document.getElementById('h1').style.display = 'none';
        document.getElementById('h2').style.display = '';
        document.getElementById('h3').style.display = '';
        document.getElementById('h4').style.display = '';
        document.getElementById('h5').style.display = ''
      }
      document.getElementById('h2').onclick = function() {
        document.getElementById('h1').style.display = '';
        document.getElementById('h2').style.display = 'none';
        document.getElementById('h3').style.display = '';
        document.getElementById('h4').style.display = '';
        document.getElementById('h5').style.display = ''
      }
      document.getElementById('h3').onclick = function() {
        document.getElementById('h1').style.display = '';
        document.getElementById('h2').style.display = '';
        document.getElementById('h3').style.display = 'none';
        document.getElementById('h4').style.display = '';
        document.getElementById('h5').style.display = ''
      }
      document.getElementById('h4').onclick = function() {
        document.getElementById('h1').style.display = '';
        document.getElementById('h2').style.display = '';
        document.getElementById('h3').style.display = '';
        document.getElementById('h4').style.display = 'none';
        document.getElementById('h5').style.display = ''
      }
      document.getElementById('h5').onclick = function() {
        document.getElementById('h1').style.display = '';
        document.getElementById('h2').style.display = '';
        document.getElementById('h3').style.display = '';
        document.getElementById('h4').style.display = '';
        document.getElementById('h5').style.display = 'none'
      }
    </script>


Можно ли как-то сократить скрипт?
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2013, 10:32
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Можно!
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2013, 11:10
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

добавляете 1-му пункту класс Актив.

При клике на li проверяйте наличие следующего li и если он есть - показывайте его (смотрите есть ли у него класс актив, если да - то надо скрыть следующий за активом элемент (опять же при условии его наличия), если его нет - то скрыть первый элемент). Если следующего li нет - показываем первый.

С предудущими элементами почти то-же самое. Код простой, но нудный. Не будет получаться - пишите.

Читайте про .next() .prev() jQuery

Проверить наличие следующего элемента: $(this).next().length
Ответить с цитированием
  #5 (permalink)  
Старый 13.02.2013, 11:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Densofting
Можно ли как-то сократить скрипт?
Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.off {
	display: none;
}
</style>
<script type="text/javascript">
function off(Id) {
	var o=document.getElementById(Id);
	var oa=document.getElementById('menu');
	oa=oa.getElementsByTagName('a');
	var i;
	for (i=0; i<oa.length; i++) {
		oa[i].className=(oa[i]==o)? 'off': '';
	};
};
</script>
</head>
<body>
<ul id='menu'>
	<li><a href="#" id="h1" class='off'>1</a></li>
	<li><a href="#" id="h2">2</a></li>
	<li><a href="#" id="h3">3</a></li>
	<li><a href="#" id="h4">4</a></li>
	<li><a href="#" id="h5">5</a></li>
</ul>
<script type="text/javascript">
var o=document.getElementById('menu'),
	i;
o=o.getElementsByTagName('li');
for (i=0; i<o.length; i++) {
	o[i].onclick=(function (Id) {
		return function () {
			off(Id);
		}
	})('h'+(i+1));
};
</script>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 13.02.2013, 11:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от tsigel
Код простой, но нудный
Твой вариант действительно нудный...
Ответить с цитированием
  #7 (permalink)  
Старый 13.02.2013, 11:57
Новичок на форуме
Отправить личное сообщение для Densofting Посмотреть профиль Найти все сообщения от Densofting
 
Регистрация: 13.02.2013
Сообщений: 4

Сам пришел к другому, более короткому, но менее универсальному и неудобному варианту.

Буду вникать, спасибо за ответы!
Ответить с цитированием
  #8 (permalink)  
Старый 13.02.2013, 12:08
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

ksa,
Я описывал несколько другой функционал. В моем варианте отображаются 2 соседа от активного элемента (предыдущий и следующий) как написано тут:
Сообщение от Densofting
Нужно сделать так, чтоб в меню отображались только две кнопки.
Если мы находимся на вкладке "1", то видим кнопки "2" и "3".
Если на вкладке "2", то "1" и "3".
И если на вкладке "3", то "1" и "2".
Вы же просто скрываете активный элемент, что можно сделать так:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<style type="text/css">
.off {
	display: none;
}
</style>
<script type="text/javascript">
function off(Id) {
	var o=document.getElementById(Id);
	var oa=document.getElementById('menu');
	oa=oa.getElementsByTagName('a');
	var i;
	for (i=0; i<oa.length; i++) {
		oa[i].className=(oa[i]==o)? 'off': '';
	};
};
</script>
</head>
<body>
<ul id='menu'>
	<li><a href="#" id="h1" class='off'>1</a></li>
	<li><a href="#" id="h2">2</a></li>
	<li><a href="#" id="h3">3</a></li>
	<li><a href="#" id="h4">4</a></li>
	<li><a href="#" id="h5">5</a></li>
</ul>
<script type="text/javascript">
$('ul').find('li').first().find('a').addClass('active');

$('li').click(function () {
  $('.active').show().removeClass('active');
  $(this).find('a').addClass('active').hide();
})
</script>
</body>
</html>

Последний раз редактировалось tsigel, 13.02.2013 в 12:15.
Ответить с цитированием
  #9 (permalink)  
Старый 13.02.2013, 13:09
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от tsigel
Я описывал несколько другой функционал.
Именно про него я и написал, что он нудный.

Сообщение от tsigel
что можно сделать так
Если использовать JQ - можно сделать и лучше.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.off {
	display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('#menu a').click(function (){
		$('#menu a').removeClass('off');
		$(this).addClass('off');
	});
});
</script>
</head>
<body>
<ul id='menu'>
	<li><a href="#" id="h1" class='off'>1</a></li>
	<li><a href="#" id="h2">2</a></li>
	<li><a href="#" id="h3">3</a></li>
	<li><a href="#" id="h4">4</a></li>
	<li><a href="#" id="h5">5</a></li>
</ul>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 13.02.2013, 13:11
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация кода (создание горизонтального меню) IONEX jQuery 0 16.01.2012 05:07
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Скрытие одного поля, показ следующего vanek2010 jQuery 1 14.07.2011 15:30
как сделать меню из кнопок списком ? arkady21 Общие вопросы Javascript 0 06.10.2010 11:40
Скрытие, показ определённого div блока. Flashton Events/DOM/Window 5 11.04.2010 23:44