Javascript.RU

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

Выполнение скрипта при открытии ссылки с параметром
Всем привет, Я НУБ
Есть сайт в теле которого содержимое меняется с помощью 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..

А вообще если кто-то знает как это можно сделать проще, скажите, буду очень рад любым вариантам.
Ответить с цитированием
  #2 (permalink)  
Старый 12.06.2013, 11:55
Профессор
Отправить личное сообщение для mta88 Посмотреть профиль Найти все сообщения от mta88
 
Регистрация: 16.05.2013
Сообщений: 229

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

для начала можно проверить значения якоря в 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 или еще что-нибудь
Ответить с цитированием
  #3 (permalink)  
Старый 12.06.2013, 12:22
Новичок на форуме
Отправить личное сообщение для infernorays Посмотреть профиль Найти все сообщения от infernorays
 
Регистрация: 12.06.2013
Сообщений: 4

А может как-то проще в ссылке можно выполнить Change('1'); ,а я что-то выдумываю? типо site.ru/script=Change('1')
Ответить с цитированием
  #4 (permalink)  
Старый 12.06.2013, 12:53
Профессор
Отправить личное сообщение для mta88 Посмотреть профиль Найти все сообщения от mta88
 
Регистрация: 16.05.2013
Сообщений: 229

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

конечно если захотеть можно запихать javascript в url и запустить его с помощью eval, но это прямое приглашение хакерам
Ответить с цитированием
  #5 (permalink)  
Старый 12.06.2013, 14:34
Новичок на форуме
Отправить личное сообщение для infernorays Посмотреть профиль Найти все сообщения от infernorays
 
Регистрация: 12.06.2013
Сообщений: 4

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

Посмотрите пожалуйста сайт.. http://express.sevstar.info/beta/
Правильнее сказать что мне нужно как-то открывать вкладки (видео, музыка, игры...) по ссылкам... тоесть если человек получит ссылку (например site.ru/игры) то его сразу перекинет на страницу с играми, а не на первую
Ответить с цитированием
  #6 (permalink)  
Старый 12.06.2013, 15:16
Профессор
Отправить личное сообщение для mta88 Посмотреть профиль Найти все сообщения от mta88
 
Регистрация: 16.05.2013
Сообщений: 229

Цитата:
это не совсем то что мне нужно...
тогда мне непонятно что вам нужно
я прочитал "пусть страница выглядит по разному в зависимости от значения якоря в url (#music, #books, ...)"
это возможно -- достаточно проверить "window.location.hash" при загрузке странницы и запустить нужные скрипты, что я и показал
Ответить с цитированием
  #7 (permalink)  
Старый 12.06.2013, 17:15
Аспирант
Отправить личное сообщение для NeoN Посмотреть профиль Найти все сообщения от NeoN
 
Регистрация: 01.03.2013
Сообщений: 77

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

<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>
Ответить с цитированием
  #8 (permalink)  
Старый 12.06.2013, 17:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от NeoN
а что если добавить функцию так:
Прекрасный пример китайского кода

Принцип DRY придумали неудачники )
Ответить с цитированием
  #9 (permalink)  
Старый 12.06.2013, 18:12
Профессор
Отправить личное сообщение для mta88 Посмотреть профиль Найти все сообщения от mta88
 
Регистрация: 16.05.2013
Сообщений: 229

Сообщение от danik.js Посмотреть сообщение
Прекрасный пример китайского кода
ну почему сразу китайского
это у топикстартера много повторений, а NeoN только один switch добавил
дешево и сердито
Ответить с цитированием
  #10 (permalink)  
Старый 12.06.2013, 18:18
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Цитата:
$(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);
});

Последний раз редактировалось ruslan_mart, 12.06.2013 в 18:22.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Как добавить класс к нужному элементу при наведении на определеные ссылки? crazygangster77 Events/DOM/Window 3 05.06.2013 02:19
как сделать что бы при открытии страницы сразу открылось большое фото oksanaweb Общие вопросы Javascript 1 05.06.2013 02:17
Переход по ссылке и выполнение скрипта AlexMak Общие вопросы Javascript 10 27.12.2008 14:42
как при открытии окна закрыть предыдущее Евдокимова Events/DOM/Window 3 16.09.2008 17:12