使用 Jquery 根据单击的菜单项切换类答案

【问题标题】：Using Jquery to toggle class based on menu item clicked使用 Jquery 根据单击的菜单项切换类
【发布时间】：2013-12-17 05:13:56
【问题描述】：

好的，我在这个网站上工作，我希望根据单击的菜单项将 div 的内容更改为内容。我没有不同菜单项的页面，但我在索引页面的 div 中有所有不同的内容。我想合并 JQuery，但我似乎找不到将菜单项类或 id 链接到相应 div 元素的方法。我的代码如下”：

<html>
<body>
    <div class="navbar grid_12">
                <ul>
                    <li class="btn" id="home"><a href="#">Home</a></li>
                    <li class="btn" id="about"><a href="#">About Me</a></li>
                    <li class="btn" id="gallery"><a href="#">Gallery</a></li>
                    <li class="btn" id="resume"><a href="#">Resume</a></li>
                    <li class="btn" id="contact"><a href="#">Contact Me</a></li>
                </ul>
     </div>
     <div class="content-container">
      <div class="bio content">
        About me content
      </div>
     <div class="contact content">
        Contact me content
     </div> 
     <div class="gallery content">
        gallery content
     </div>
   </div>
</body>
</html>

等等。

至于我的 JQuery 编码到目前为止，这是我在尝试不同的事情数小时后的地方

       //Update Content-Container Div 
$(document).ready(function(){
    var $main = $(".content-container");
    var $section = $(".content");

    $("#about").click(function(){
        $main.empty();
        $main.find(".bio");
        $(".bio").show();        
    });

});

【问题讨论】：

标签： javascript jquery html css menubar

【解决方案1】：

不要为每个菜单项编写单独的处理程序，而是使用data-* 属性来引用需要显示的特定内容，然后在点击处理程序中使用该属性来决定必须显示哪些内容

<div class="navbar grid_12">
    <ul>
        <li class="btn" id="home"><a href="#">Home</a></li>
        <li class="btn" id="about" data-target=".bio"><a href="#">About Me</a></li>
        <li class="btn" id="gallery" data-target=".gallery"><a href="#">Gallery</a></li>
        <li class="btn" id="resume"><a href="#">Resume</a></li>
        <li class="btn" id="contact" data-target=".contact"><a href="#">Contact Me</a></li>
    </ul>
</div>
<div class="content-container">
    <div class="bio content">
        About me content
    </div>
    <div class="contact content">
        Contact me content
    </div> 
    <div class="gallery content">
        gallery content
    </div>
</div>

然后

$(document).ready(function () {
    var $main = $(".content-container");
    var $section = $(".content").hide();

    $(".navbar li.btn").click(function (e) {
        e.preventDefault();
        $section.hide();
        var target = $(this).data('target');
        if(target){
            $section.filter(target).show();
        }
    });

});

演示：Fiddle

【讨论】：

这立即奏效了！谢谢大家，我想我需要更多地使用 JQuery，因为我觉得我知道逻辑但找到代码并不那么简单。练习练习练习！

【解决方案2】：

查看jquery tabs，我想你需要这个。

    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        $( "#tabs" ).tabs();
      });
      </script>
    </head>
    <body>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Home</a></li>
        <li><a href="#tabs-2">About Me</a></li>
        <li><a href="#tabs-3">Gallery</a></li>
        <li><a href="#tabs-4">Resume</a></li>
        <li><a href="#tabs-5">Contact Me</a></li>
      </ul>
      <div id="tabs-1">
        <p>Home content</p>
      </div>
      <div id="tabs-2">
        <p>About me content</p>
      </div>
      <div id="tabs-3">
        <p>Gallery content </p>
      </div>
       <div id="tabs-4">
        <p>Resume content </p>
      </div>
       <div id="tabs-5">
        <p>Contact Me content </p>
      </div>
    </div>
    </body>
</html>

【讨论】：

【解决方案3】：

试试：

假设ids 与相关类相关联。

HTML：

<li class="btn" id="bio"><a href="#">About Me</a></li>

JS：

$(".btn").click(function () {
    $(".content-container .content").hide();
    $(".content-container").find("."+$(this).attr("id")).show();    
});

DEMO here.

【讨论】：

【解决方案4】：

我最初在这里隐藏了所有内容，然后根据您单击的链接，页面显示正确的内容。请注意，您的 about 页面具有错误的 id 属性，因此它将无法正常工作，但您的联系人和图库页面可以正常工作。这大致就是 twitter 引导框架的工作原理，我建议你看看。

var $main = $(".content-container");
var $section = $(".content");
$section.hide();

$("li.btn").on('click', function() {
    var link_id = $(this).attr('id');
    var content = $main.find("." + link_id);
    $section.hide();
    content.show();
})

Working Example

【讨论】：

【解决方案5】：

const containers = Array.from(document.querySelectorAll('.content'));
// Slicing for link as it's not related to changing the slide content,
// so we don't want to bind behaviour to it.
const links = Array.from(document.querySelectorAll('.navbar ul .btn a')).slice(1);

$(function() {
   hideEls(containers);
});

function hideEls (els) {
  if (Array.isArray(els)) {
    els.forEach(el => {
      el.style.display = 'none';
    });
  }
  return;
}

function showEl (els, i, e) {
  e.preventDefault();
  hideEls(els);
  els[i].style.display = 'block';
}

links.forEach((link, i) => {
  link.addEventListener('click', showEl.bind(null, containers, i));
});

这是fiddle

【讨论】：

由于您使用了项目索引，我正在考虑使用您的代码，但是当我在小提琴中运行您的代码时，发生的第一件事是隐藏的内容闪烁，发生的第二件事是链接未针对要显示的正确内容...即：简历链接显示图库内容，图库显示联系我的内容...
@Chris22 哇，过去的爆炸。你说得对！我已经更新了我的答案（从 3 年前开始）不再使用 jQuery，并且可以实际工作（仍然使用索引）。还更新了小提琴。希望这会有所帮助。
感谢您回复和更新您的代码——看起来棒极了！链接没有针对正确的内容仍然存在问题。简历链接显示图库，联系我显示简历和图库显示联系我...
德普。忘记更新标记中的内容。索引工作正常，只需要更新小提琴，使容器索引与链接索引匹配。
干得好！感谢您继续更新此解决方案。它现在运行良好，但在刷新/加载小提琴时仍然会显示隐藏内容的闪光......我没有使用 ES6 并且不确定小提琴是否与那个版本的 JS '战斗'？