在这方面需要js帮助。一页上的两个导航，一侧导航和一个顶部导航一起工作。单击并选择时，侧面导航活动状态和顶部导航当前状态将突出显示，但是，当单击第二和第三个顶部导航链接时，将删除侧面导航活动/选定状态。
这是HTML：
<div id="nav">
<ul>
<li class="active"><a href="#SideNav1">Side Nav 1</a></li>
<li><a href="#SideNav2">Side Nav 2</a></li>
</ul><br />
<div id="SideNav1">
<ul>
<li class="current">Side Nav 1 Top Nav 1</li>
<p>Content here</p> <br />
<li><a href="#SideNav1TopNav2">Side Nav 1 Top Nav 2</a></li>
<p>Content here</p> <br />
<li><a href="#SideNav1TopNav3">Side Nav 1 Top Nav 3</a></li>
<p>Content here</p> <br />
</ul>
</div>
<div id="SideNav2">
<ul>
<li class="current">Side Nav 2 Top Nav 2</li>
<p>Content here</p> <br />
<li><a href="#SideNav2TopNav2">Side Nav 2 Top Nav 2</a></li>
<p>Content here</p> <br />
<li><a href="#SideNav3TopNav3">Side Nav 2 Top Nav 3</a></li>
<p>Content here</p> <br />
</ul>
</div>
<div id="SideNav1TopNav2">
<ul>
<li><a href="#SideNav1">Side Nav 1 Top Nav 1</a></li>
<p>Content here</p> <br />
<li class="current">Side Nav 1 Top Nav 2</li>
<p>Content here</p> <br />
<li><a href="#SideNav1TopNav3">Side Nav 1 Top Nav 3</a></li>
<p>Content here</p> <br />
</ul>
</div>
<div id="SideNav1TopNav3">
<ul>
<li><a href="#SideNav1">Side Nav 1 Top Nav 1</a></li>
<p>Content here</p> <br />
<li><a href="#SideNav1TopNav3">Side Nav 1 Top Nav 2</a></li>
<p>Content here</p> <br />
<li class="current">Side Nav 1 Top Nav 3</li>
<p>Content here</p> <br />
</ul>
</div>
<div id="SideNav2TopNav2">
<ul>
<li><a href="#SideNav2">Side Nav 2 Top Nav 1</a></li>
<p>Content here</p> <br />
<li class="current">Side Nav 2 Top Nav 2</li>
<p>Content here</p> <br />
<li><a href="#SideNav2TopNav3">Side Nav 2 Top Nav 3</a></li>
<p>Content here</p> <br />
</ul>
</div>
<div id="SideNav2TopNav3">
<ul>
<li><a href="#SideNav2">Side Nav 2 Top Nav 1</a></li>
<p>Content here</p> <br />
<li><a href="#SideNav2TopNav3">Side Nav 2 Top Nav 2</a></li>
<p>Content here</p> <br />
<li class="current">Side Nav 2 Top Nav 3</li>
<p>Content here</p> <br />
</ul>
</div>
</div>
这是js：
$(function() {
$('#nav div').hide();
$('#nav div:first').show();
$('#nav ul li:first').addClass('active');
$('#nav ul li a').click(function(){
var currentTab = $(this).attr('href');
var vis = $(currentTab).is(':visible');
$('#nav div').hide();
$('#nav ul li').removeClass('active');
$(this).parent().addClass('active');
if(vis) {
$(currentTab).hide();
} else {
$(currentTab).show();
}
});
});
和CSS：
.active {
background:#008CDC;
}
.current {
background:#ECEDED;
}
这里的动态代码：
http://jsfiddle.net/tqhHA/79/
最佳答案
这是一个描述需求的实例，可以取得很多成果。由于某种原因，Stack Overflow社区（好吧，那些遵循JavaScript标记的社区）喜欢一个很好的“隐藏我，告诉我”问题。 ;-)据我所知，要求如下：
侧面导航应确定哪些内容出现在主区域中
每个主要区域应包含自己的子导航
主动侧导航应以不同的样式指示，并可以通过标记预先选择
有效的子导航应以不同的样式指示，并可以通过标记预先选择
我没有深入研究答案的另一个要求可能很容易地是：应该存储导航和子导航状态（例如，使用cookie，localstorage API或会话变量），以便在返回页面时进行检索。
就我个人而言，我认为如果“标签”是您想要的“顶级导航”方式，但我以后将其称为“ Subnav”，则可以轻松使用jQuery UI。我的示例不使用jQuery UI。
（以下是以下示例的小提琴：http://jsfiddle.net/tqhHA/85/）
关于原始代码的第一件事要注意的是，它缺少逻辑标记结构。 ID为SideNav1的div与SideNav1TopNav2处于同一级别。只是没有意义。然后nav中有两个项目，SEEM像它们应该是您的旁边导航栏，但在名称方面不匹配。在“内容”区域中，当前选项卡具有类“当前”（很棒！），但是没有自己的锚链接来切出内容（糟糕！）。
不仅如此，它也是无效的标记（您不能将<p>元素散布在<li>元素中。
让我们通过以下方式清理所有内容：
将有一个主要的导航（类似于您原始的nav列表）
在任何给定时间，“内容区域”将仅填充一个“内容” div。
Subnav将遵循与主nav ..链接相同的模式，这些链接描述应该可见的内容。这是同一件事，更深一层嵌套。将“内容”区域视为页面本身的较小版本。
就提供示例代码而言，内容本身将揭示交互过程中应该发生的情况
HTML：
<ul id="nav">
<li><a href="#content1">Item 1</a></li>
<li class="active"><a href="#content2">Item 2</a></li>
</ul>
<div id="content1" class="content">
<ul>
<li class="active"><a href="#tab1_1">Subnav 1</a></li>
<li><a href="#tab1_2">Subnav 2</a></li>
<li><a href="#tab1_3">Subnav 3</a></li>
</ul>
<div id="tab1_1">
<p>This content should only be visible when Item 1 is selected from the
main nav, and Subnav 1 is selected in the content area.</p>
</div>
<div id="tab1_2">
<p>This content should only be visible when Item 1 is selected from the
main nav, and Subnav 2 is selected in the content area. This <a href="#">fake anchor</a>
shows that you can add anchors inside the tabs.</p>
</div>
<div id="tab1_3">
<p>This content should only be visible when Item 1 is selected from the
main nav, and Subnav 3 is selected in the content area.</p>
</div>
</div>
<div id="content2" class="content">
<ul>
<li><a href="#tab2_1">Subnav 1</a></li>
<li><a href="#tab2_2">Subnav 2</a></li>
<li class="active"><a href="#tab2_3">Subnav 3</a></li>
</ul>
<div id="tab2_1">
<p>This content should only be visible when Item 2 is selected from the
main nav, and Subnav 1 is selected in the content area.</p>
</div>
<div id="tab2_2">
<p>This content should only be visible when Item 2 is selected from the
main nav, and Subnav 2 is selected in the content area.</p>
</div>
<div id="tab2_3">
<p>This content should only be visible when Item 2 is selected from the
main nav, and Subnav 3 is selected in the content area.</p>
</div>
</div>
CSS也被修订：
如果我们要谈论侧面和顶部导航，就让它侧面和顶部。我们不会要求乐于助人的SO成员仅凭文字来解决问题。
两种导航类型都可以使用相同的类（
active）。您需要做的以不同的方式设置样式是特定的.active { background:navy; }
.active a { color: white }
.content .active { background:yellow; }
.content .active a { color: black; }
/* we're demoing sidebars... let's make it a SIDE bar! */
#nav, .content { float: left }
#nav { width: 100px; }
.content { width: 300px; margin-left: 24px;}
/* make the Subnav horizontal... more "tab"-like! */
.content li { display: inline-block }
好的，现在我们有了一个文档。这就是事情……以上所有这些可能都不是最好的方法。我的闹钟响了，因为有太多的ID可以方便导航。我之所以把它们留在这里是因为它与您的方法非常匹配，但是它甚至还没有模块化。无论如何，只要承认记录不一定是理想的，而是会奏效的。
JS也是全新的。重要的是，如果我们已经有了适当的HTML结构，那么编写JS很容易！内联注释已经提供了我认为足够的文档，所以让我们开始吧：
var updateMain = function() {
// just hide ALL content areas first, rather than micro-managing
$('.content, .content div').hide();
// with all hidden, reveal only the content areas that have become active
var activeLinks = $('.active a');
activeLinks.each(function() {
var activeArea = $(this).attr('href');
$(activeArea).show();
});
};
$(document).ready(function() {
updateMain();
// Bind a click event to the all navigation items (both main and sub)
$('#nav a, .content > ul a').on('click', function(event) {
event.preventDefault(); // prevent default anchor behaviour
var $parent = $(this).parent(); // jQ object of the list item containing the anchor clicked
// only do stuff if user has not just clicked a nav that's already active
if (!($parent.hasClass('active'))) {
$parent.siblings().removeClass('active');
$parent.addClass('active');
}
updateMain(); // with new active classes in place, show the correct content
});
});
底线是：我们要做的只是在页面加载上，然后在每次单击后，我们将显示与“活动”导航相关的内容。单击所做的只是更改（处于活动状态），然后运行内容更新程序功能。
免责声明：
使用此处使用的技术，您可能会得到“未样式化内容的Flash”（FOUC），因为它是JavaScript在进行隐藏。让JavaScript处理它对于可访问性和SEO更好。但是您可以研究消除FOUC的技术。我没有去这里。
希望您将看到如何组织内容和捕获事件。然后，您可以发现改进的机会！显示/隐藏相关内容的一种流行方法是再次对其进行结构化，以便每个链接位于内容之前，并且您可以执行
$(this).next().show()。有成千上万种方法可以给这只猫剥皮。
关于javascript - Javascript左侧和顶部导航事件状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10069225/