在主干网中使用CSS3目标而不引起路由问题

我正在主干中使用CSS目标进行一些基本动画。他们的问题是，我当前使用的方法在URL中附加了一个

#banner

，如果用户在单击触发器开始动画后刷新页面，主干将尝试将其解释为路由。关于如何管理它，以便在单击时可以执行CSS操作，有什么线索吗

这是我的HTML：

这是我的CSS：

#横幅{
高度：70像素；
背景色：#中交；
}
#横幅：目标{
高度：140像素；
-webkit过渡：1s轻松；
-moz转换：1s易用性；
-o-过渡：1s容易；
-ms转换：1s容易；
过渡：1s轻松；
}
#班纳里登{
显示：无；
}
#横幅：目标#点击{
显示：无；
}
#横幅：目标#横幅{
显示：块；
背景色：#中交；
}

如果您想避免使用

：target

方法，则应通过javaScript处理此问题

否则，在CSS中，以非语义方式，可以使用

表单

元素触发

：checked

状态： HTML更新：

<input type="checkbox" id="hdshw"/><section id="banner" tabindex="0">
        <span id="bannerexpand"></span>
        <label id="click" for="hdshw">Click Me</label>
        <span id="bannerhidden" ></span>
    </section>

---

对于较旧的浏览器来说，这不是防弹的。

工作起来很有魅力。非常感谢。

#banner {
height: 70px;
background-color: #CCCCCC;
}
:checked ~ #banner {
 height: 140px;
 -webkit-transition: 1s ease;
 -moz-transition: 1s ease;
 -o-transition: 1s ease;
 -ms-transition: 1s ease;
 transition: 1s ease;
 }

#bannerhidden,
#hdshw{/* hide the checkbox */
display: none;
 }

:checked ~ #banner  #click {
display: none;
 }

:checked ~ #banner  #bannerhidden {
display: block;
background-color: #CCCCCC;
 }