1

我正在使用类似#loadpanel1:target在查看器中加载的 div 中运行动画的东西。目前我正在使用#hashtag锚方法来激活容器，问题是这是一个画廊风格的查看器，页面会随着每个链接跳到顶部。我想做以下两件事之一：

  1. 要么防止#loadpanel链接的跳跃
  2. 将锚链接替换为合适的 Js 替代品。 
#holdall {
width:      0px;
height:     0px;
position:absolute;
background: white;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-ms-transition: all 3s ease-out;
}
#loadpanel1:target #holdall { 
-webkit-transform: translateY(0px); 
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);



    div id="viewer">
        <!-- Target divs -->
        <div id="loadpanel1">

        <!-- Hold All -->
        <div id="holdall">
            <div class="panel" id="panel1">
                <div class="info">
                    <h2>title</h2>
                    <p>test</p>

                </div>
            </div>
            <div class="panel" id="panel2">
                <div class="info">
                    <h2>title2</h2>
                    <p>test2</p>

                </div>

            </div>
            <div class="panel" id="panel3">
                <div class="info">
                    <h2>title3</h2>
                    <p>test3</p>


                </div>
            </div>
            <div class="panel" id="panel4">
                <div class="info">
                    <h2>title4</h2>
                    <p>test4</p>

                </div>
            </div>
            <div class="panel" id="panel5">
                <div class="info">
                    <h2>title5</h2>
                    <p>test5</p>

                </div>
            </div>
            <div class="panel" id="panel6">
                <div class="info">
                    <h2>title6</h2>
                    <p>test6</p>

                </div>
            </div>
        </div>
        <!-- End Hold All -->
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <!-- End Target divs -->
    </div>
    <div id="nav">
        <ul>
            <li><a href="#loadpanel1">1</a></li>
            <li><a href="#loadpanel2">2</a></li>
            <li><a href="#loadpanel3">3</a></li>
            <li><a href="#loadpanel4">4</a></li>
            <li><a href="#loadpanel5">5</a></li>
            <li><a href="#loadpanel6">6</a></li>
        </ul>
    </div> 
</div>
4

0 回答 0