Question

当url有一些id时如何设置div显示属性块？

我想在网址为#showcity

时将div显示属性设置为无阻止

示例

CSS

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

HTML

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

我希望在网址匹配display:block

时显示城市（example.com/#showcity）

我该怎么做？

Answer 1

只需将id showcity提供给div元素，然后使用:target伪类使其可见：

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

.city:target {
  display: block;
}

<强> 6.6.2. The target pseudo-class :target

某些URI指的是资源中的位置。这种URI结束了   使用＆＃34;数字符号＆＃34; （＃）后跟一个锚标识符（称为   片段标识符）。

带有片段标识符的URI链接到其中的某个元素   文档，称为目标元素。例如，这是一个URI   指向HTML文档中名为section_2的锚：

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

目标元素可以由：target伪类表示。如果   文档的URI没有片段标识符，然后文档具有   没有目标元素。

值得注意的是:target is supported in IE9+。

Answer 2

你看起来像这样：

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

当url有一些id时如何设置div显示属性块？

2 个答案: