我有一个没有脚本的滑块。但是有一个小问题,它与锚点一起工作,所以页面一直滚动,当开关滑动时。有没有什么办法解决这一问题?如果我添加 event.preventDefault(),滑块就不能工作了。
我从这个网站上拿的:手风琴
这是我的haml代码:
%article.accordion
%section#slide1.blue
%h2
= link_to 'Slide 1', '#slide1'
%p Some text
%section#slide2.grey
%h2
= link_to 'Slide 2', '#slide2'
%p Some text
%section#slide3.green
%h2
= link_to 'Slide 3', '#slide3'
%p Some text
%section#slide4.light-blue
%h2
= link_to 'Slide 4', '#slide4'
%p Some text
很骚:
article.accordion
display: block
width: 100%
margin: 0 auto
overflow: auto
section
position: relative
display: block
float: left
width: 4%
height: 370px
overflow: hidden
margin: 1px
h2
position: absolute
font-size: 1em
font-weight: bold
width: 185px
height: 4%
top: 185px
text-align: left
right: 0
text-indent: 1em
padding: 0
margin: 0
color: #ddd
-webkit-transform-origin: 100% 0%
-moz-transform-origin: 100% 0%
-ms-transform-origin: 100% 0%
-o-transform-origin: 100% 0%
transform-origin: 100% 0%
-webkit-transform: rotate(90deg)
-moz-transform: rotate(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
a
display: block
width: 100%
line-height: 2.8em
text-decoration: none
color: inherit
outline: 0 none
&:target
width: 87%
padding: 0 1em
color: $color-blue
background-color: #fff
h2
color: $color-white
article.accordion
position:relative
section, section h2
-webkit-transition: all 1s ease
-moz-transition: all 1s ease
-ms-transition: all 1s ease
-o-transition: all 1s ease
transition: all 1s ease