how to set div display property block when url have some id?

Question

i want to set div display property none to block when url have id #showcity

example

CSS

 .city{
     width:200px;
     height:200px; 
     background: red;
     display: none; 
}

HTML

 <div>some data </div>
 <div class="city">Some city</div>

I want to show city(display:block) when url hit like example.com/#showcity

how can i do this?

possible duplicate of [jquery: if url contains #work then do something](http://stackoverflow.com/questions/5757362/jquery-if-url-contains-work-then-do-something) — Sleek Geek, Feb 12 '15 at 13:44

score 1 · Answer 1 · answered Feb 12 '15 at 13:37

Simply give an id of showcity to the div element, then use :target pseudo-class to make it visible:

<div id="showcity" class="city">Some city</div>

.city:target {
  display: block;
}

6.6.2. The target pseudo-class :target

Some URIs refer to a location within a resource. This kind of URI ends with a "number sign" (#) followed by an anchor identifier (called the fragment identifier).

URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section_2 in an HTML document:

http://example.com/html/top.html#section_2

A target element can be represented by the :target pseudo-class. If the document's URI has no fragment identifier, then the document has no target element.

It's worth noting that :target is supported in IE9+.

score 1 · Accepted Answer · answered Feb 12 '15 at 13:42

1

Are you looking something like this:

 if (window.location.href.indexOf("#showcity") > -1) {
    $(".city").css('display','block');
 }

answered Feb 12 '15 at 13:42

Pioter

465
3
8
21

how to set div display property block when url have some id?

2 Answers2