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

Question

好吧，我正在这个网站上工作，我希望将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();        
    });

});

Answer 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();
        }
    });

});

演示：小提琴

Answer 2

查看jquery标签，我认为您需要这个。

    <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>

Answer 3

尝试：

假设id与相关的类相关联。

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

演示在这里。

Answer 4

我最初在这里隐藏了所有内容，然后根据您单击的链接，页面显示正确的内容。 请注意，您的“关于”页面的id属性错误，因此它将无法正常工作，但是您的“联系人”页面和“图库”页面可以正常工作。 这大概是twitter bootstrap框架的工作方式，我建议您看看。

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

工作实例

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

这是一个小提琴

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

问题描述

5 个解决方案

解决方案1
3 已采纳 2013-12-17 05:17:48

解决方案2
3 2013-12-17 05:25:47

解决方案3
2 2013-12-17 05:20:53

解决方案4
2 2013-12-17 05:58:27

解决方案5
1 2013-12-17 05:50:54

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

问题描述

5 个解决方案

解决方案1 3 已采纳 2013-12-17 05:17:48

解决方案2 3 2013-12-17 05:25:47

解决方案3 2 2013-12-17 05:20:53

解决方案4 2 2013-12-17 05:58:27

解决方案5 1 2013-12-17 05:50:54

解决方案1
3 已采纳 2013-12-17 05:17:48

解决方案2
3 2013-12-17 05:25:47

解决方案3
2 2013-12-17 05:20:53

解决方案4
2 2013-12-17 05:58:27

解决方案5
1 2013-12-17 05:50:54