2014-05-17 3 views
0

Я знаю, что этот вопрос задан несколько раз, но мой случай отличается. Поэтому у меня есть внешний файл JavaScript, который содержит код для моего accordion menus (вы знаете, пользователь нажимает на заголовок и расширяется). Теперь я хочу получить # (знак хэша) из URL-адреса и в соответствии с ним открыть конкретный «аккордеон» onload. Так вот, что я пробовал:Запустите функцию JS на загрузке страницы

<body onload="runAccordion(index);"> <!-- In the example bellow, index should be equal to 1 --> 

Но он никогда не работал (по желанию), потому что я не знаю, как «читать» # (идентификатор элемента) URL-адрес в ... Вот разметка для аккордеона:

<div id="AccordionContainer" class="AccordionContainer"> 

    <div onclick="runAccordion(1);"> 
     <div class="AccordionTitle" id="AccordionTitle1"> 
      <p>Title</p> 
     </div> 
    </div> 
    <div id="Accordion1Content" class="AccordionContent"> 
     <p> 
<!-- Content --> 
     </p> 
    </div> 

Или, может быть, я должен использовать PHP $_GET ???

содержание JS файла:

var ContentHeight = 200; 
var TimeToSlide = 250.0; 

var openAccordion = ''; 

function runAccordion(index) { 
    var nID = "Accordion" + index + "Content"; 
    if (openAccordion == nID) 
     nID = ''; 

    setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33); 

    openAccordion = nID; 
} 

function animate(lastTick, timeLeft, closingId, openingId) { 
    var curTick = new Date().getTime(); 
    var elapsedTicks = curTick - lastTick; 

    var opening = (openingId == '') ? null : document.getElementById(openingId); 
    var closing = (closingId == '') ? null : document.getElementById(closingId); 

    if (timeLeft <= elapsedTicks) { 
     if (opening != null) 
      opening.style.height = ContentHeight + 'px'; 

     if (closing != null) { 
      closing.style.display = 'none'; 
      closing.style.height = '0px'; 
     } 
     return; 
    } 

    timeLeft -= elapsedTicks; 
    var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight); 

    if (opening != null) { 
     if (opening.style.display != 'block') 
      opening.style.display = 'block'; 
     opening.style.height = (ContentHeight - newClosedHeight) + 'px'; 
    } 

    if (closing != null) 
     closing.style.height = newClosedHeight + 'px'; 

    setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33); 
} 
+5

'window.location.hash' является то, что вы ищете. – undefined

+1

Как вы получаете значение для 'index'? – shatheesh

+0

Извините @undefined - я не заметил ваш комментарий до тех пор, пока не будет –

ответ

2

Дайте следующее попробовать:

$(document).ready(function() { 
    var hash = window.location.hash; 
    hash = hash.length > 0 ? hash.substring(1); 
    if (hash.length) { 
     runAccordion(window.location.hash); 
    } 
}); 

выше будет захватить ваш индекс хэш из URL. Чтобы добавить хэш URL, выполните следующие действия:

window.location.hash = 1; //or whatever your index is 
+2

Могу ли я спросить, почему нисхождение, чтобы я мог улучшить свой ответ? –

+0

Я не сделал это, но думаю, это потому, что ваше решение включает jQuery, о котором не упоминается в исходном сообщении. Вытягивание внешней зависимости для чего-то, что вы можете сделать в нескольких строках простого JS, совершенно ненужно. –

+1

@StefanoSanfilippo - jQuery является одним из тегов, которые он добавил в сообщение. Подразумевается возможность использования jQuery без его подсчета в качестве внешней зависимости. Если бы не было помечено jQuery, я бы согласился с вами, однако :) –

0
# You can use: # 

window.onload = function() { 
    runAccordion(window.location.hash); 
} 
+1

[Почему downvote?] –

+0

Честно говоря, я думаю, что кто-то наблюдает за этим сообщением, которое просто отрицает ответы всех без причины. Мы с вами дали вполне обоснованные ответы, и ни у кого из нас не было объяснений нисходящего потока. +1 для твоих :) –

+0

+1 для тебя тоже Захари :) –

Смежные вопросы