Выполнение скрипта при открытии ссылки с параметром
Всем привет, Я НУБ :)
Есть сайт в теле которого содержимое меняется с помощью 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.. А вообще если кто-то знает как это можно сделать проще, скажите, буду очень рад любым вариантам. |
то есть нужно чтобы при загрузке с различными якорями был различный дизайн?
для начала можно проверить значения якоря в 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 или еще что-нибудь |
А может как-то проще в ссылке можно выполнить Change('1'); ,а я что-то выдумываю? типо site.ru/script=Change('1')
|
Цитата:
якори это максимум интерактивности, которую дают современные браузеры для url все остальное делается с помощью css и javascript конечно если захотеть можно запихать javascript в url и запустить его с помощью eval, но это прямое приглашение хакерам |
mta88,
Посмотрел я пример, но что-то он не работает, я так понял он разное содержимое в div выводит...? это не совсем то что мне нужно... Посмотрите пожалуйста сайт.. http://express.sevstar.info/beta/ Правильнее сказать что мне нужно как-то открывать вкладки (видео, музыка, игры...) по ссылкам... тоесть если человек получит ссылку (например site.ru/игры) то его сразу перекинет на страницу с играми, а не на первую |
Цитата:
я прочитал "пусть страница выглядит по разному в зависимости от значения якоря в url (#music, #books, ...)" это возможно -- достаточно проверить "window.location.hash" при загрузке странницы и запустить нужные скрипты, что я и показал |
а что если добавить функцию так:
<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>
|
Цитата:
Принцип DRY придумали неудачники ) |
Цитата:
это у топикстартера много повторений, а NeoN только один switch добавил дешево и сердито |
Цитата:
$(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);
});
|
Цитата:
Я пока еще молчу про функцию change. |
Цитата:
var hash = window.location.hash.substring(1);
var map = {
video: 1,
music: 2,
games: 3,
converse: 4,
portal: 5,
services: 6,
books: 7,
vkchat: 8
};
if (hash in map) {
change(map[hash]);
А вобще - херня это все. Почему бы не дать айдишники блокам и не париться? Гемор себе на жопу ищете.. |
Ruslan_xDD,
Боже ребята , это просто прелесть... неужели это так просто... Всё учу JS, (просто как-то не очень нужно было) Всем спасибо.. |
Цитата:
Цитата:
Вообще, если делать по человечески, то делать не через якорь. http://site.com/?section=music
change('<?=htmlspecialchars($_GET['section'])?>');
А при клике на блок менять адрес: <div class="blocks"> <div id="music">Музыка</div> <div id="portal">Портал</div> </div>
$('.blocks > div').click(function()
{
history.pushState(0, 0, '/?'+$(this).attr('id'));
});
|
Цитата:
|
Цитата:
|
Цитата:
В случае с якорем страница одна. А учитывая существование IE то нам так и или иначе придется делать якорную навигацию. Цитата:
|
danik.js, ну можно сделать нормальные отдельные страницы и если поддерживается history API, то аяксом выдёргивать содержимое страницы, а если не поддерживается, то переходить по этой ссылке. Например:
$('a').click(function()
{
var a = $(this).attr('href');
if(!!(window.history && history.pushState && a))
{
$('body').load(a+' body');
history.pushState(0, 0, a);
return false;
}
else document.location = a;
});
|
Ruslan_xDD, это уже совсем другая песня.
Несколько вопросов по коду: 1) зачем двойное отрицание в условии 2) зачем проверка window.history 3) зачем вешать обработчик в случае когда нету history.pushState 4) какой профит в подгрузке страницы целиком? 5) че за нули в вызове pushState? |
Цитата:
Цитата:
Цитата:
Цитата:
|
Цитата:
А объект history возможно где-то и отсутствует. В каком-то старом браузере или еще где. |
danik.js, разве тут будет какае-та разница между pushState(null, null, 'url') и pushState(0, 0, 'url')?
|
Цитата:
|
| Часовой пояс GMT +3, время: 01:15. |