Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   style.display = "none" (https://javascript.ru/forum/dom-window/33925-style-display-%3D-none.html)

pavdin 14.12.2012 08:47

style.display = "none"
 
Привет всем гуру JS!

Обращаюсь за помощью, для тех кто знает жабу, ответ найдет за 5 минут
Я сам программист php, но "Жабу" знаю, на уровне "Методом тыка и интуиции)))))". А в синтаксисе вообще не бум бум. Выучить руки не доходят. Поэтому обращаюсь к Вам за помощью. Задача простая.

НА сайте есть скрытый блок, display = "none"
И есть кнопки показать и скрыть. По умолчанию блок скрыт.

Все работает, вроде как надо.

1. Задача: как сделать наоборот. Т.е. по умолчанию блок показывается, а при клике скрывается.
2. Как сделать, что бы выбор юзера запоминался, даже при обновлении страницы.

Что бы было понятнее, ниже привожу листинг. Кто сможет помочь советом, буду весьма благодарен.

САМ СКРИПТ

<script>
	
	$(document).ready(function(){
		
		mode = "compact";
		
		$("#img_compact").click(function(){
			
			if(mode == "detail") {
				
				document.getElementById("img_compact").src = "/images/category_compact_active.png";
				document.getElementById("img_detail").src = "/images/category_detail_deactive.png";
				document.getElementById("section_list_1").style.display = "block";
				document.getElementById("section_list_2").style.display = "none";
				mode = "compact";
				
			}
		
		});
		
		$("#img_detail").click(function(){
			
			if(mode == "compact") {
				
				document.getElementById("img_detail").src = "/images/category_detail_active.png";
				document.getElementById("img_compact").src = "/images/category_compact_deactive.png";
				document.getElementById("section_list_2").style.display = "block";
				document.getElementById("section_list_1").style.display = "none";
				mode = "detail";
				
			}
		
		});
		
	});	
</script>

pavdin 14.12.2012 08:51

Пытался гуглить
нашёл что то типо
сохранить или зафиксировать состояние tab элемента JS $.cookie
Но к сожалению знаний самому не хватило.

ОлегА 14.12.2012 09:11

1.
function show_hide(elem){

   if( $(elem).css('display') == 'none' ){
         $(elem).show();
   } else {
         $(elem).hide();
   }

}

<div onclick="show_hide(this)">blablabla</div>


2. записывать в куку, но это можно и с пхп сделать, зачем вам скрипт?

pavdin 14.12.2012 09:32

Цитата:

Сообщение от ОлегА (Сообщение 221231)
1.
function show_hide(elem){

   if( $(elem).css('display') == 'none' ){
         $(elem).show();
   } else {
         $(elem).hide();
   }

}

<div onclick="show_hide(this)">blablabla</div>


2. записывать в куку, но это можно и с пхп сделать, зачем вам скрипт?

1. Вы мне дали кусочек кода. Вернее вообще новую функцию.
Вы можете помочь с вышеописанным листингом? Та нужно просто чучуть подправить код, сделать по умолчанию показ а не скрытие.

2. Мне нужно именно на js. Hа php не подходит. И потом на лету не получиться записать на php такую куку. Страница будет перезагружаться. Понимаете?

ОлегА 14.12.2012 10:11

Цитата:

Сообщение от pavdin
сделать по умолчанию показ а не скрытие

- этот код работает именно по умолчанию на показ

1. в вашем вопросе не было сказано, что нужно как то исправить ваш код была задан вопрос был написан ответ.
2. и вообще если вы используете jQuery то не надо от него отходить, я про код внутри click

попробуйте так :

<script>
	
	$(document).ready(function(){
		var mode = "compact";
		
                $('#section_list_1').css('display','block');
		
		$("#img_compact").click(function(){
			
			if(mode == "detail") {
				
				$("#img_compact").attr('src', '/images/category_compact_active.png');
				$("#img_detail").attr('src', '/images/category_detail_deactive.png');
                                $('#section_list_1').css('display','none');
                                $('#section_list_2').css('display','block');
				mode = "compact";
				
			}
		
		});
		
		$("#img_detail").click(function(){
			
			if(mode == "compact") {
				
				$("#img_detail").attr('src', '/images/category_detail_active.png');
				$("#img_compact").attr('src', '/images/category_compact_deactive.png');
				$('#section_list_2').css('display','none');
                                $('#section_list_1').css('display','block');
				mode = "detail";
				
			}
		
		});
		
	});	
</script>


3. насчет юзера напишите поподробнее, не понятно что за юзер, от куда он должен браться, что бы его как то запомнить

pavdin 14.12.2012 10:15

http://javascript.ru/forum/dom-windo...-skriptom.html


Я описал более подробно.
Да, Ваш пример что дали не помог.


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