我决定尝试只使用CSS和HTML创建一个选项卡菜单。使用:target伪类来显示适当的div，我已经实现了它，只是它跳来跳去有点太多，不便于用户友好：
http://brad.sebdengroup.com/newodynsite/stockman.php#StockControl
有什么我可以解决的吗？起初，我想远离JavaScript，但如果它能解决这个问题，我会很乐意添加一些。
注意：我知道我可以使用jQuery/一些花哨的库重建一个新的选项卡菜单，但如果可能的话，我宁愿修复这个问题。
这是因为您在锚点中使用了哈希值。这会导致它跳转到一个由hash指定id的div
要对此进行排序，您可以使用jQuery通过使用.preventDefault(); 来停止跳跃
您可以通过给每个跳转的锚点一个prevent类，然后使用jQuery来停止跳转来使用它。当然，您可以根据您的html结构更改此选择器。
$(".prevent").click(function(e) { //Note the e for event
e.preventDefault();
});
不使用jQuery进行编辑
在诅咒不能使用jQuery之后，我试图构建一个纯js解决方案。您需要对此进行检查，以确保它在您的页面上有效。
以下是jsfiddle示例。
我所做的是找到页面上的所有锚，然后在它们的onclick属性中添加return false。如果这是在你的直播网站上进行的，你需要进一步选择锚，请参阅此示例和解释：
我还为你不想跳的锚添加了一个类。要使用它，您需要将一个"menuControl"类添加到任何想要停止跳转的锚点。
下面是我的JavaScript，以防jsfiddle链接断开。仅此一提，但您现在需要使用JavaScript控制这些选项卡的导航，因为使用return false将停止导航。
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
if ( anchors[i].className == "menuControl" ) {
anchors[i].setAttribute("onclick", "return false");
}
}
您可以在每次单击后使用window.scrollTo(0, 0);滚动回文档顶部，这很可能发生得太快，任何用户都不会注意到。
文档
对于水平跳跃，您可以在身体上使用overflow-y: scroll，以便滚动条始终在页面上，即使没有足够的内容导致滚动。
您可以将页面的最小高度设置为div使用css移动到顶部所需的高度。
body { min-height: 1000px; }
将1000px替换为您需要的任意数量的px。
这将防止所有跳转到使浏览器视图成为div目标的初始点击之外
这就像现在单击"销售订单处理"，然后单击"工程订单处理"。如果你不想在页面加载时有多余的空白，你可以只在点击选项卡时设置高度。
我会使用jQuery使其平滑滚动。这里有一个很好的演示。
$(window).scroll(function () {
var newTop = $(window).scrollTop();
if (newTop <= 130){
newTop = 130;
}
$("#idofElementToScroll").stop()
.animate({'top': newTop}, "slow");
});
这是我在个人网站的私人部分编写并实现的一个功能。
这里发生的事情是，你宣布你目前在屏幕上的位置，然后当你向下滚动时，你正在平滑滚动的元素也会随之滚动。
我知道你要求移动锚，但你可以很容易地调整这个功能来达到这个目的。
请注意，"130"是指我希望移动元件与窗口顶部的最小距离。
祝你好运！
您遇到了一个问题，因为您的容器高度差异很大。
我建议您将所有内容容器包装在一个无样式的div中。然后循环遍历所有容器。计算容器的最大高度。然后给所有的包装div这个最大高度。
按照Stu Nicholls的例子，使用目标伪类的同级选择器来避免这个问题，但要注意Webkit错误：
<!doctype html>
<html lang="en">
<head>
<title>CSS Target Navigation</title>
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-page-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#cssplayPages {width:690px; height:400px; position:relative; margin:20px auto;}
#cssplayPages #navigate {padding:0; margin:35px 0 0 0; list-style:none; width:160px; text-align:right; float:left;}
#cssplayPages #navigate li {float:left; width:160px; margin:0 0 5px 0;}
#cssplayPages #navigate li a {display:block; width:140px; padding:0 10px; background:#ddd; font:bold 13px/35px arial, sans-serif; text-decoration:none; color:#000; border-radius:5px;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#cssplayPages #navigate li a:hover {background:#6cf;}
#cssplayPages #navigate.john a {background:#6cf;}
.targets {display:none;}
#cssplayPages div {position:absolute; width:0; left:190px; top:0; opacity:0; height:0px; overflow:hidden;
-moz-transition: 1.5s;
-ms-transition: 1.5s;
-o-transition: 1.5s;
-webkit-transition: 1.5s;
transition: 1.5s;
}
#cssplayPages div.constable {height:400px; width:500px; opacity:1;}
#cssplayPages div img {float:left; padding:0 10px 10px 0;}
#cssplayPages div h2 {padding:0 0 10px 0; margin:0; font: 24px/24px arial, sans-serif;}
#cssplayPages div p {padding:0 0 10px 0; margin:0; font: 13px/18px arial, sans-serif; text-align:justify;}
#constable:target ~ #navigate .john a {background:#6cf;}
#constable:target ~ .constable {height:400px; width:500px; opacity:1;}
#monet:target ~ #navigate .claude a {background:#6cf;}
#monet:target ~ #navigate .john a {background:#ddd;}
#monet:target ~ #navigate .john a:hover {background:#6cf;}
#monet:target ~ .constable {height:0; width:0; opacity:0;}
#monet:target ~ .monet {height:400px; width:500px; opacity:1;}
#vangogh:target ~ #navigate .vincent a {background:#6cf;}
#vangogh:target ~ #navigate .john a {background:#ddd;}
#vangogh:target ~ #navigate .john a:hover {background:#6cf;}
#vangogh:target ~ .constable {height:0; width:0; opacity:0;}
#vangogh:target ~ .vangogh {height:400px; width:500px; opacity:1;}
#chagall:target ~ #navigate .marc a {background:#6cf;}
#chagall:target ~ #navigate .john a {background:#ddd;}
#chagall:target ~ #navigate .john a:hover {background:#6cf;}
#chagall:target ~ .constable {height:0; width:0; opacity:0;}
#chagall:target ~ .chagall {height:400px; width:500px; opacity:1;}
#picasso:target ~ #navigate .pablo a {background:#6cf;}
#picasso:target ~ #navigate .john a {background:#ddd;}
#picasso:target ~ #navigate .john a:hover {background:#6cf;}
#picasso:target ~ .constable {height:0; width:0; opacity:0;}
#picasso:target ~ .picasso {height:400px; width:500px; opacity:1;}
</style>
</head>
<body>
<div id="cssplayPages">
<b class="targets" id="constable"></b>
<b class="targets" id="monet"></b>
<b class="targets" id="vangogh"></b>
<b class="targets" id="chagall"></b>
<b class="targets" id="picasso"></b>
<ul id="navigate">
<li class="john"><a href="#constable" onClick="history.go(1)">John Constable ☛</a></li>
<li class="claude"><a href="#monet" onClick="history.go(1)">Claude Monet ☛</a></li>
<li class="vincent"><a href="#vangogh" onClick="history.go(1)">Vincent Van Gogh ☛</a></li>
<li class="marc"><a href="#chagall" onClick="history.go(1)">Marc Chagall ☛</a></li>
<li class="pablo"><a href="#picasso" onClick="history.go(1)">Pablo Picasso ☛</a></li>
</ul>
<div class="constable">
<h2>John Constable</h2>
<img src="painters/constable2.jpg" alt="The Hay Wain" title="The Hay Wain" />
<p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>
<p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p>
<p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by <a href="http://www.ibiblio.org/wm/paint/auth/delacroix/">Delacroix</a> and Bonington among others.</p>
<p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p>
<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/constable/">The WebMuseum, Paris</a></p>
</div>
<div class="monet">
<h2>Claude Monet</h2>
<img src="painters/monet2.jpg" alt="Women in the Garden" title="Women in the Garden" />
<p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <a href="http://www.ibiblio.org/wm/paint/auth/boudin/">Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p>
<p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <a href="http://www.ibiblio.org/wm/paint/auth/pissarro/">Pissarro</a>. After two years' military service in Algiers, he returned to Le Havre and met <a href="http://www.ibiblio.org/wm/paint/auth/jongkind/">Jongkind</a>, to whom he said he owed `the definitive education of my eye'.</p>
<p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p>
<p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Musée d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>
<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/monet/">The WebMuseum, Paris</a></p>
</div>
<div class="vangogh">
<h2>Vincent Van Gogh</h2>
<img src="painters/vincent2.jpg" alt="The Starry Night" title="The Starry Night" />
<p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p>
<p>With <a href="http://www.ibiblio.org/wm/paint/auth/cezanne/">Cézanne</a> and <a href="http://www.ibiblio.org/wm/paint/auth/gauguin/">Gauguin</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a href="http://www.ibiblio.org/wm/paint/glo/expressionism/">Expressionism</a> in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known <a href="http://www.ibiblio.org/wm/paint/auth/gogh/starry-night/">The Starry Night</a> (1889).</p>
<p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/gogh/">The WebMuseum, Paris</a></p>
</div>
<div class="chagall">
<h2>Marc Chagall</h2>
<img src="painters/chagall2.jpg" alt="Adam and Eve" title="Adam and Eve" />
<p>Russian-born French painter. Born to a humble Jewish family in the ghetto of a large town in White Russia, Chagall passed a childhood steeped in Hasidic culture.</p>
<p>Very early in life he was encouraged by his mother to follow his vocation and she managed to get him into a St Petersburg art school. Returning to Vitebsk, he became engaged to Bella Rosenfeld (whom he married twelve years later), then, in 1910, set off for Paris, 'the Mecca of art'.</p>
<p>He was a tenant at La Ruche, where he had Modigliani and Soutine for neighbours. His Slav Expressionism was tinged with the influence of <a href="http://www.artchive.com/artchive/D/daumier.html">Daumier</a>, Jean-François Millet, the Nabis and the Fauves.</p>
<p>He was also influenced by <a href="http://www.artchive.com/artchive/cubism.html">Cubism</a>. Essentially a colourist, Chagall was interested in the Simultaneist vision of Robert Delaunay and the Luminists of the Section d'Or.</p>
</div>
<div class="picasso">
<h2>Pablo Picasso</h2>
<img src="painters/picasso2.jpg" alt="Girtl in front of mirror" title="Girtl in front of mirror" />
<p>Pablo Picasso, born in Spain, was a child prodigy who was recognized as such by his art-teacher father, who ably led him along.</p>
<p>The small Museo de Picasso in Barcelona is devoted primarily to his <a href="http://www.artchive.com/artchive/P/picasso_early.html">early works</a>, which include strikingly realistic renderings of casts of ancient sculpture.</p>
<p>He was a rebel from the start and, as a teenager, began to frequent the Barcelona cafes where intellectuals gathered.</p>
<p>He soon went to Paris, the capital of art, and soaked up the works of Manet, Gustave Courbet, and <a href="http://www.artchive.com/artchive/T/toulouse-lautrec.html">Toulouse-Lautrec</a>, whose sketchy style impressed him greatly. Then it was back to Spain, a return to France, and again back to Spain - all in the years 1899 to 1904.</p>
</div>
</div>
<p class="info">copyright © stu nicholls - CSS play</p>
</div> <!-- end info -->
</body>
</html>
这里有另一个建议：
<style>
nav ~ div {
display: none;
}
.tab {
position:fixed;
top:0;
}
:target:not([id="box1"]) ~ .box1 {
display: none;
}
#box1:target ~ nav .box1,
#box2:target ~ nav .box2,
#box3:target ~ nav .box3 {
color:red;
}
#box1:target ~ div.box1,
#box2:target ~ div.box2,
#box3:target ~ div.box3 {
display:block;
}
</style>
<section id="content">
<div id="box1" class="tab"></div>
<div id="box2" class="tab"></div>
<div id="box3" class="tab"></div>
<nav>
<a href="#box1" class="box1">box1</a>
<a href="#box2" class="box2">box2</a>
<a href="#box2" class="box3">box3</a>
</nav>
<div class="box1">
blah
</div>
<div class="box2">
blah
</div>
<div class="box3">
blah
</div>
</section>
这应该能起到作用，因为锚是固定的。它可以跳一次，但以后就不会了。