Форум

infernorays · #1 (**permalink**) 12.06.2013, 11:16

Всем привет, Я НУБ

Есть сайт в теле которого содержимое меняется с помощью jquery
методом измения видимости элементов через CSS. Изменяется всё это нажатием на Onclick ссылки...

У них написан href="#blablabla" с решёткой (типо якорь), но он не нужен.. просто меняется ссылка в адресной строке..

Вроде как site.ru/#blabla1 , site.ru/#blabla2 , site.ru/#blabla3

Что мне нужно реализовать... чтобы при открытии ссылок (в адресной строке)такого вида ^
Запускалось то что срабатывает при нажатии на ссылки

как-то так объяснил...

Вообщем если открыть ссылку с другого сайта или просто её в адр.строку ввести , чтобы сработало измение видимости элементов.

Сайт вот: http://express.sevstar.info/beta/ (на всякий случай)

Конкретно о чём идёт речь:

Скрит:

<script>
function Change(sdf) {if($(".cont" + sdf + "").css("display") == "none") {$(".cont1:visible,.cont2:visible,.cont3:visible,.cont4:visible,.cont5:visible,.cont6:visible,.cont7:visible,.cont8:visible,.cont9:visible").stop(true, true).hide(300);
 $(".cont" + sdf + "").show(500);}}
</script>

То что в CSS:

.cont1 {display:none;}
.cont2 {display:none;}
.cont3 {display:none;}
.cont4 {display:none;}
.cont5 {display:none;}
.cont6 {display:none;}
.cont7 {display:none;}
.cont8 {display:none;}
.cont9 {}

Кнопчуки что меняют содержимое:

<li class=but1 onClick="Change('1');"><a href=#video>ВИДЕО</a></li>
<li class=but2 onClick="Change('2');"><a href=#music>МУЗЫКА</a></li>
<li class=but3 onClick="Change('3');"><a href=#games>ИГРЫ</a></li>
<li class=but4 onClick="Change('4');"><a href=#converse>ОБЩЕНИЕ</a></li>
<li class=but5 onClick="Change('5');"><a href=#portal>ПОРТАЛЫ</a></li>
<li class=but6 onClick="Change('6');"><a href=#servises>СЕРВИСЫ</a></li>
<li class=but7 onClick="Change('7');"><a href=#books>КНИГИ</a></li>
<li class=but8 onClick="Change('8');"><a href=#vkchat>ЧАТ ВК</a></li>

Элементы которые меняются типичные <div> с классом css..

А вообще если кто-то знает как это можно сделать проще, скажите, буду очень рад любым вариантам.

mta88 · #2 (**permalink**) 12.06.2013, 11:55

то есть нужно чтобы при загрузке с различными якорями был различный дизайн?

для начала можно проверить значения якоря в window.location.hash при загрузке страницы

<!doctype html>
<html>
<head>
<script>
window.onload = function() {
  var hash = window.location.hash;
  var div = document.getElementById('id_a');
  
  var result = 'no hash';
  
  if (hash==='#a') {
    result = 'aaa';
  } else if (hash==='#b') {
    result = 'bbb';
  }
  
  div.innerHTML = result;
}
</script>
</head>

<body>
<div id="id_a"></div>
</body>
</html>

это самый низкий уровень
после этого можно проверить кроссбраузерность, использовать jquery или еще что-нибудь

infernorays · #3 (**permalink**) 12.06.2013, 12:22

А может как-то проще в ссылке можно выполнить Change('1'); ,а я что-то выдумываю? типо site.ru/script=Change('1')

mta88 · #4 (**permalink**) 12.06.2013, 12:53

Сообщение от infernorays

А может как-то проще в ссылке можно выполнить Change('1'); ,а я что-то выдумываю? типо site.ru/script=Change('1')

нет, url это просто строка
якори это максимум интерактивности, которую дают современные браузеры для url
все остальное делается с помощью css и javascript

конечно если захотеть можно запихать javascript в url и запустить его с помощью eval, но это прямое приглашение хакерам

infernorays · #5 (**permalink**) 12.06.2013, 14:34

mta88,
Посмотрел я пример, но что-то он не работает, я так понял он разное содержимое в div выводит...? это не совсем то что мне нужно...

Посмотрите пожалуйста сайт.. http://express.sevstar.info/beta/
Правильнее сказать что мне нужно как-то открывать вкладки (видео, музыка, игры...) по ссылкам... тоесть если человек получит ссылку (например site.ru/игры) то его сразу перекинет на страницу с играми, а не на первую

mta88 · #6 (**permalink**) 12.06.2013, 15:16

Цитата:

это не совсем то что мне нужно...

тогда мне непонятно что вам нужно
я прочитал "пусть страница выглядит по разному в зависимости от значения якоря в url (#music, #books, ...)"
это возможно -- достаточно проверить "window.location.hash" при загрузке странницы и запустить нужные скрипты, что я и показал

NeoN · #7 (**permalink**) 12.06.2013, 17:15

а что если добавить функцию так:

<script>
function Change(sdf) {if($(".cont" + sdf + "").css("display") == "none") {$(".cont1:visible,.cont2:visible,.cont3:visible,.cont4:visible,.cont5:visible,.cont6:visible,.cont7:visible,.cont8:visible,.cont9:visible").stop(true, true).hide(300);
 $(".cont" + sdf + "").show(500);}}

$(document).ready(function(){
		 var hash = window.location.hash;
	 
	 switch(hash){
	 	case '#video' : Change('1')
	 	break
	 	case '#music' : Change('2')
	 	break
	 	case '#games' : Change('3')
	 	break
	 	case '#converse' : Change('4')
	 	break
	 	case '#portal' : Change('5')
	 	break
	 	case '#servises' : Change('6')
	 	break
	 	case '#books' : Change('7')
	 	break
	 	case '#vkchat' : Change('8')
	 	break
	 }
});
</script>

danik.js · #8 (**permalink**) 12.06.2013, 17:55

Сообщение от NeoN

а что если добавить функцию так:

Прекрасный пример китайского кода

Принцип DRY придумали неудачники )

mta88 · #9 (**permalink**) 12.06.2013, 18:12

Сообщение от danik.js

Прекрасный пример китайского кода

ну почему сразу китайского
это у топикстартера много повторений, а NeoN только один switch добавил
дешево и сердито

ruslan_mart · #10 (**permalink**) 12.06.2013, 18:18

Цитата:

$(document).ready(function(){
         var hash = window.location.hash;
      
     switch(hash){
        case '#video' : Change('1')
        break
        case '#music' : Change('2')
        break
        case '#games' : Change('3')
        break
        case '#converse' : Change('4')
        break
        case '#portal' : Change('5')
        break
        case '#servises' : Change('6')
        break
        case '#books' : Change('7')
        break
        case '#vkchat' : Change('8')
        break
   }
});

Можно проще:

$(function(){
     var a = window.location.hash, b = ['video', 'music', 'games', 'converse', 'portal', 'servises', 'books', 'vkchat'];
     for(i=0; i<b.length; i++) if(a == '#'+b[i]) Change(i+1);
});

Форум

Справочник

Discord чат

Курсы javascript