2014-01-21 2 views
3

I'm working on a project where I need to hide a div when the a x is clicked. I'm wanting to target a specific div to be closed, the div that is holding the href nice. I'm getting a bit stuck with targeting the div once the X is clicked. Could you give any pointers for simple designer?Скрыть мой DIV с помощью <a href="#nice">

HTML

Div name = footer and the link class is "linky"

CSS

 .linky:link { 
     footer:display: none; 
     } 

Any help would be appreciated.

Regards,

ответ

4

Put the link target directly before the footer:

<body> 
    <a href="#linky">hide footer</a> 
    ... other content ... 
    <div id="linky"></div> 
    <footer>footer</footer> 
</body> 

the use the + operator:

#linky:target + footer { 
    display: none; 
} 

/* to prevent scrolling to the bottom */ 
#linky { 
    position: fixed;  
    top: 0; 
} 

see this fiddle

a + b будет предназначаться b, если это непосредственно после a.

Обратите внимание на две дополнительные отличия от версии:

  • Использование :target вместо :link (:link будет предназначаться ссылки)
  • Использование id вместо class

Я хотел бы добавить что нижний колонтитул будет снова виден, как только пользователь нажмет на любую другую ссылку #anchor.

Обновление: Теперь предотвращение прокрутки; удален простой вариант, потому что прокрутка не может быть предотвращены там

+0

Здравствуйте, спасибо за Тут. Мне потребовалось немного внимания на вашей скрипке, чтобы текст исчез на дне. Должен признаться, что теперь я пошел по этому проекту по-другому, но спасибо вам за помощь и вернусь позже. – user3082874

0

Попробуйте это:

<div id="div1"> 
    Hello, i will be hidden on click the below link 
</div> 

<a href="" id="link" onClick="hide()"><b>Click here</b></a> to hide 
## this is the link code 
<a href="" id="link" onClick="hide()"><b>Click here</b> to hide 
<script> 
    function hide(){ 
     document.getElementById('div1').style.display="none"; 
    } 
</script> 
+0

Здравствуйте, спасибо за помощь. Это javascript? Я попробовал, но ничего не случилось ... Я не понимаю, почему это тоже не должно работать. – user3082874

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