Как открыть скрытый div, когда в URL есть хеш?

Question

Я использую этот код javascript, чтобы пара «показать / скрыть» переключил div на моем сайте:

<script language="javascript"> 
function toggledean() {
    var ele = document.getElementById("toggleTextdean");
    var text = document.getElementById("displayTextdean");

    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Show more";
    } 
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide";
    }
} 
</script>

Что я должен добавить к этому коду, чтобы div отображался при загрузке страницы с определенным #hash, добавленным в URL?

Большое спасибо.

Answer 1

Это не тот ответ javascript, который вы хотите, но вы можете попробовать поиграть с псевдоселектором :target.Например,

<!-- HTML -->
<div id="foo">show this with #foo.</div>
<div id="bar">#bar shows this.</div>

<style type="text/css">
    div {display: none}
    :target {display: block}
</style>

Пример: http://jsfiddle.net/ZAHns/4/ (спасибо Джареду за идею добавления якорей).

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

Примечание. Примите этот ответ ОГРОМНЫМ зерном соли - не используйте его.

---

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

var in_hash = location.hash.slice(1) === what_you_are_looking_for;
if (in_hash) ? /* IN HASH */ : /* NOT IN HASH */;

Answer 2

Примерно так должно работать:

<script>
    var hash = window.location.hash.replace('#', '');
    if (hash) {
        document.getElementById(hash).style.display = 'block'
    }
</script>

Если у вас есть только один элемент, как в вашем скрипте, вы можете просто вызвать функцию, чтобы переключить его, если в URL существует какой-либо хеш:

<script type="text/javascript"> 
   function toggledean() {
    ...
    } 
    if (window.location.hash == '#dean') toggledean(); 
</script>

Или вы можете сделать свой скрипт переключения немного более универсальным:

<script type="text/javascript"> 

var hash = window.location.hash.replace('#', '');   

function toggle (elementPartial) {

    var ele = document.getElementById('toggleText'+elementPartial);
    var text = document.getElementById('displayText'+elementPartial);
    if(ele.style.display == 'block') {
        ele.style.display = 'none';
        text.innerHTML = 'Show more';
    } else {
        ele.style.display = 'block';
        text.innerHTML = 'Hide';
    }
} 

if (hash) {
    toggle(hash); 
}

</script>

Кроме того, вы можете сделать это немного проще и гибче, используя инфраструктуру javascript, такую ​​как jQuery.

Answer 3

Другие ответили на часть хэша URL, я просто прокомментирую скрипт:

> <script language="javascript">  

Атрибут языка устарел, требуется тип, поэтому:

<script type="text/javascript">

> function toggledean() {
>     var ele = document.getElementById("toggleTextdean");
>     var text = document.getElementById("displayTextdean");
> 
>     if(ele.style.display == "block") {

По умолчанию display свойство равно '' (пустая строка), если вы ранее не установили его как "block".

>         ele.style.display = "none";
>         text.innerHTML = "Show more";
>     } else {
>         ele.style.display = 'block';
>         text.innerHTML = 'Hide';
>     }

Учитывая очень высокую вероятность того, что div будет иметь отображаемое значение '' при первой загрузке, вам гораздо лучше тестировать style.display = 'none', поэтому:

if (ele.style.display == 'none') {
    ele.style.display = '';
    text.innerHTML = 'Hide';

} else {
    ele.style.display = 'none';
    text.innerHTML = 'Show more';
}