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标记的社区）喜欢一个好的“隐藏我，给我看”的问题。 ;-)据我所知，要求是这些：

侧面导航应确定哪些内容出现在主区域
每个主要区域应包含自己的子导航
主动侧导航应以不同的样式表示，并可通过标记
主动子导航应以不同的风格表示，并可通过标记
我没有深入研究我的答案的另一个要求可能很容易：导航和子导航状态应存储（例如，使用cookie，localstorage API或会话变量），以便在返回页面时进行检索。

就个人而言，我觉得如果“Tabs”是你想要的方式，你称之为“顶级导航”，但我将称之为“Subnav”，你可以很容易地使用jQuery UI。我的示例不使用jQuery UI。

（以下是以下样本的小提琴：http://jsfiddle.net/tqhHA/85/）

关于原始代码的首要注意事项是它缺少逻辑标记结构。 ID为SideNav1的div与SideNav1TopNav2处于同一级别。它没有意义。然后在nav中有两个项目，它们应该是您的侧导航，但在名称方面不匹配。在“内容”区域中，当前选项卡具有“当前”类（很棒！）但是没有自己的锚链接用于切换内容（哎呀！）。

不仅如此，它还是无效的标记（您的<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 of Unstyled Content”（FOUC），因为它是JavaScript进行隐藏。让JavaScript处理它对于可访问性和SEO更好。但你可以研究破坏FOUC的技术。我没有进入那里。
希望您能看到如何构建内容和捕获事件。然后你可以发现改进的机会！显示/隐藏相关内容的一种流行方式是再次对其进行不同的结构化，以便每个链接都在内容之前，例如，您可以执行$(this).next().show()。有很多种方法可以给这只猫上皮。

Javascript左侧和顶部导航活动当前状态

1 个答案: