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-*属性来引用需要显示的特定内容，然后在单击处理程序中使用该属性来决定必须显示哪些内容< / p>

<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

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

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

DEMO here.

Answer 4

这里我最初隐藏了所有内容，然后根据您点击的链接，页面显示正确的内容。请注意，您的about页面具有错误的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();
})

Working Example

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

这是fiddle

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

5 个答案: