Javascript left and top nav active current states

Question

需要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/

Answer 1

这是一个例子，其中描述的要求会有很多成果。出于某种原因，Stack Overflow社区（以及那些遵循JavaScript标签的社区）喜欢一个好的“隐藏我，展示我”的问题。 ;-)据我所知道的，要求是这些：

1. A面导航应当确定哪些内容出现在主区域
2. 各主要区域应包含自己的子导航
3. 主动方导航应以不同的样式来指定，并可以通过标记
4. 活动子导航应由不同的风格来显示，并可以通过标记来预选预选
5. ，我没有深入到我的回答可以很容易地附加要求：导航和子导航状态应被存储（例如，使用cookie，本地存储API或会话变量）以便在返回页面时进行检索。

就我个人而言，我觉得如果“标签”是你想要为你称之为“顶部导航”而后来称为“Subnav”的方式，那么你可以轻松地使用jQuery UI。我的例子不使用jQuery UI。

---

（这里有以下样本小提琴：http://jsfiddle.net/tqhHA/85/）

需要注意你的原始代码的第一件事是，它缺乏一个合理的标记结构。编号为SideNav1的div与SideNav1TopNav2处于同一水平。这只是没有意义。然后在nav有两个项目SEEM喜欢他们应该是你的侧面导航，但不匹配的名称。在“内容”区域中，当前标签具有“当前”类（很棒！），但没有自己的锚链接来切换内容（哎呀！）。

不仅如此，它是无效的标记（你不能让你的<p>元素穿插在<li>元素中。

让我们清理这一切都取决于在以下几个方面：

1. 将有（类似原始的nav列表）
2. “内容区”将仅由一个“内容”填充一个主导航div在任何给定的时间。
3. Subnav将遵循与描述应该可见内容的主导航链接相同的模式。它只是一样的东西，嵌套更深一层。将“内容”区域看作是页面本身的较小版本。
4. 只需在提供的示例代码的条款，内容本身，就会发现什么都要相互作用过程中发生

的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修改为好：

1. 如果我们要谈论侧面和顶部导航，让我们把它放在侧面和顶部。我们不会要求有帮助的SO成员通过案文解决问题。
2. 对于这两种类型的导航，您可以使用相同的类（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 } 

好了，现在我们有一个适当的文件。这是事情...所有上述可能甚至不是最好的方法。为了便于导航，我有很多身份证警报响起。我把它们留在了原来的位置，因为它与你的方法非常吻合，但它甚至不像模块化那样。无论如何，只要承认记录它不一定是理想的，但它会起作用。

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 
    }); 
});​ 

底线是：我们正在做的是在页面加载，然后在每次点击后，我们会显示内容与“主动”导航相关。所有点击都是“活动”的改变，然后运行内容更新功能。

---

免责声明：

• 在这里使用时，你可能会得到 “无样式内容的闪光”（FOUC），因为它是JavaScript的执行隐藏技术。让JavaScript处理它更好的可访问性和搜索引擎优化。但是你可以研究破坏FOUC的技术。我没有在这里进入。

• 希望你会看到如何构建内容和捕获事件。然后你可以找到改进的机会！显示/隐藏相关内容的一种流行方式是再次以不同的方式构造它，以便每个链接都在内容之前，例如，您可以执行一个$(this).next().show()。有几十种方法来抚平这只猫。