CSS 图像查看器在点击时移动页面

Question

当我单击侧面的选项卡时，它会更改图片，这正是我想要的，但它也会移动页面，使视图位于顶部。我注意到只有当下面也有页面内容时才会发生这种情况，这就是为什么在这个例子中我放置了大量换行符。

如果您想要一个更好的示例来说明我的意思，这里是我的页面的链接：

dl.dropbox.com/u/8391091/Ebay%20page.html

我在这里放置的代码只是图像查看器的代码（css , html)

            /* Setup Tabs */

            #view ul{

            margin-top: 0;
            background: black;
            width: 85px; /* Width of Tab Image */
            float: left;
            list-style: none;
            border-right:8px solid grey;
            }

            #view ul li{

            margin-left: -40px;
            margin-right: -40px;
            height:75px; /* Height of Tab Image */
            }

            /* Setup Tab so normal opacity is 40 and rollover is 100 */
            #view ul li a img{
            border: 0px;    
            /* for IE */
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
            filter:alpha(opacity=50);

            /* CSS3 standard */
            opacity:0.5;

            }

            /* Change Opacity to 100% on hover*/
            #view ul li a:hover img{

            /* for IE */
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter:alpha(opacity=100);

            /* CSS3 standard */
            opacity: 1.0;
            }

            /* Places images to the right of the tabs,
            and hides non selected images */
            #images{

            width: 500px; 
            height: 300px; 
            overflow: hidden;  /* Hides the non selected images */
            float: left;
            }

            /* Square border around viewer*/
            #wrapper{
            outline-style: none;
            border-top-left-radius: 5px 5px;
            border-top-right-radius: 5px 5px;
            border-bottom-left-radius: 5px 5px;
            border-bottom-right-radius: 5px 5px;
            -moz-border-radius-topleft: 5px 5px;
            -moz-border-radius-topright: 5px 5px;
            -moz-border-radius-bottomleft: 5px 5px;
            -moz-border-radius-bottomright: 5px 5px;
            width: 633px;
            height: 300px;
            border: 10px solid grey;
            margin: 0px auto;
            }
            </style>

            <div id="section1">
            <div id="view">
            <div id="wrapper">
            <!-- Tabs -->
            <ul>
            <li><a href="#image1" id="tab1"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4095.jpg?t=1312893965" width="125" height="75"/></a></li>
            <li><a href="#image2" id="tab2"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4093.png?t=1312894058" width="125" height="75"/></a></li>
            <li><a href="#image3" id="tab3"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4089.png?t=1312894246" width="125" height="75"/></a></li>
            <li><a href="#image4" id="tab4"><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/Photo07-08-2011205730.jpg?t=1312894308" width="125"           height="75"/></a></li>
            </ul>

            <!-- Images -->
            <div id="images">
            <div><a name="image1"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4095.jpg?t=1312893965" width="500" height="300" /></div>
            <div><a name="image2"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4093.png?t=1312894058" width="500" height="300" /></div>
            <div><a name="image3"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/IMG_4089.png?t=1312894246" width="500" height="300" /></div>
            <div><a name="image4"></a><img src="http://i1114.photobucket.com/albums/k536/outatimeoyster/Photo07-08-2011205730.jpg?t=1312894308" width="500" height="300" /></div>
            </div>
            </div>      
            </div>
            <p class="text" align="center">(Click tabs at side for larger picture)</p>      
            </div>

            </br>
            </br>
            </br>
            </br>
            </br>

            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            More page content
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>
            </br>

Answer 1

它使用片段标识符（在 url 中：“ #image1 ”），这是默认行为。当您将这些标识符用于跳转链接时，它会将带有 id 的元素带到页面顶部的 url 中。现在修复该问题，我不确定，但我现在就试试！
那这个呢？\
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
您只需进行翻转即可将大图的可见性从隐藏更改为可见。这就是您通常这样做的方式。您只需稍微更改一下代码，然后将所有大图片堆叠在一起，而不是用溢出来隐藏。

Answer 2

a href="#viewer">
<img src="../Photo_Gallery/thumbs/pic1.jpg">
<span>
<img src="../Photo_Gallery/pic1.jpg">
<br>
   optional caption
</span>
</a>

所以你把主图片放在一个跨度中。

.rollover li a span {
      visibility: hidden;
}
.rollover a:hover, .rollover a:hover span, .rollover a:active, .rollover a:active
span, .rollover a:focus, .rollover a:focus span {
      visibility: visible;
}

他们在教程中就是这样做的。因此，不要像您那样将所有图片排成一行并使用溢出：隐藏。将每张图片放在各自的缩略图下，而不是必须将它们隐藏在彼此之上。但是事情是的，他们这样做的方式是，页面加载时没有显示图片。所以我会尝试找到一种方法来解决这个问题。