使用Jquery根据菜单项点击切换课程

好吧，即时通讯工作在这个网站上，其中Id喜欢根据点击菜单项将div的内容更改为内容。我没有针对不同菜单项的页面，但我在索引页面中使用了div中的所有不同内容。我想加入JQuery，但我似乎无法找到一种方法将菜单项类或id链接到相应的div元素。我下面的“代码：使用Jquery根据菜单项点击切换课程

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

});

来源

2013-12-17 mrfevrier

而不是写入单个处理器小时后对于每个菜单项，使用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

来源

2013-12-17 05:17:48

这立即工作！谢谢你们，我想我需要更多地使用JQuery，因为我觉得我知道逻辑，但是找到代码并不那么简单。实践练习！ – mrfevrier

尝试：

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

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.

来源

2013-12-17 05:20:53 Hiral

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

来源

2013-12-17 05:25:47

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

来源

2013-12-17 05:50:54 monners

我在考虑使用您的代码，因为您使用的是项目索引，但是当我在小提琴中运行代码时，首先发生的事情是隐藏的内容闪烁，第二件事是链接没有针对正确的内容显示...即：_Resume_链接显示_Gallery content_，_Gallery_显示_contact我的内容_... – Chris22

@ Chris22哇，爆炸过去。你是对的！我已经更新了我的答案（从3年前开始），不再使用jQuery，并且实际工作（仍然使用索引）。也更新了小提琴。希望这可以帮助。 – monners

感谢您回复并更新您的代码 - 看起来棒极了！链接没有针对正确的内容仍然存在问题。 _Resume_链接显示_gallery_，_Contact me_ show _Resume_和_Gallery_显示_Contact me _... – Chris22

在这里，我开始隐藏的一切，然后根据什么链接点击，页面显示正确的内容。请注意，您的关于页面的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

来源

2013-12-17 05:58:27

使用Jquery根据菜单项点击切换课程

回答

相关问题