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

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/

score 1 · Accepted Answer

这是一个示例，其中描述需求会产生大量成果。出于某种原因，Stack Overflow 社区（嗯，那些遵循 JavaScript 标签的社区）喜欢一个很好的“隐藏我，告诉我”问题。;-) 据我所知，要求如下：

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

就个人而言，我觉得如果“选项卡”是你想要的方式，你称之为“顶部导航”，但我以后称之为“子导航”，你可以轻松地使用 jQuery UI。我的示例不使用 jQuery UI。

（这是以下示例的小提琴：http: //jsfiddle.net/tqhHA/85/）

关于您的原始代码，首先要注意的是它缺少逻辑标记结构。具有 id 的 divSideNav1与SideNav1TopNav2. 这没有任何意义。然后，该 SEEM 中有两个项目nav应该是您的侧导航，但在名称方面不匹配。在“内容”区域，当前选项卡具有“当前”类（太棒了！），但没有用于切换内容的锚链接（哎呀！）。

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

让我们通过以下方式清理这一切：

将有一个主导航（类似于您的原始nav列表）
在任何给定时间，“内容区域”将仅由一个“内容”div 填充。
子导航将遵循与主导航相同的模式。链接描述应该可见的内容。它只是同一件事，嵌套更深一层。将“内容”区域视为页面本身功能的较小版本。
仅就提供示例代码而言，内容本身将揭示交互过程中应该发生的事情

的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左侧和顶部导航活动当前状态

1 回答 1

Related

Reference