Question

我可以知道是否可以在jquery中执行此操作？

我有一个类别链接：

<ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Moulds</a></li>
<li><a href="#">Videos</a></li>
</ul>

，内容由div分隔

<div id="tools">This is the tools content</div>
<div id="moulds">This is the moulds content</div>
<div id="videos">This is the videos content</div>

默认情况下，它会显示工具内容，并隐藏其他两个（模具和视频）div。它们仅在单击菜单时显示。最重要的是可以在加载其他div时添加加载图片或淡出淡出动画等内容吗？

可以这样做吗？我搜索stackoverflow但没有一个符合我想要的......

提前谢谢你！

Answer 1

为什么不使用标签/类似的东西。无论如何，你可以这样做，但在此之前，用这种方式改变HTML：

<ul>
    <li><a href="#tools">Tools</a></li>
    <li><a href="#moulds">Moulds</a></li>
    <li><a href="#videos">Videos</a></li>
</ul>

在JavaScript中用这种方式：

$("ul li a").click(function(){
    theDiv = $(this).attr("href");
    $(theDiv).show();
});

如果您只想显示一个div，可以这样做：

$("ul li a").click(function(){
    $("div").hide();
    theDiv = $(this).attr("href");
    $(theDiv).show();
});

我的建议是，使用<div>和<a> s的公共类。

最后，你可能会到达这个：

<ul>
    <li><a class="link" href="#tools">Tools</a></li>
    <li><a class="link" href="#moulds">Moulds</a></li>
    <li><a class="link" href="#videos">Videos</a></li>
</ul>

<div class="tab" id="tools">This is the tools content</div>
<div class="tab" id="moulds">This is the moulds content</div>
<div class="tab" id="videos">This is the videos content</div>

然后，事件处理将是：

$(".link").click(function(){
    $(".tab").hide();
    theDiv = $(this).attr("href");
    $(theDiv).show();
});

Answer 2

HY

fquings在jquery中很容易。这里是一个样本

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h1>js test</h1>

<ul id="myMenu">
    <li><a href="#" data-id="tools">Tools</a></li>
    <li><a href="#" data-id="modules">Moulds</a></li>
    <li><a href="#" data-id="videos">Videos</a></li>
</ul>

<div class="subcontent" id="tools" style="display:block">tools</div>
<div class="subcontent" id="modules">modules</div>
<div class="subcontent" id="videos">videos</div>

<script type="text/javascript">
$(document).ready(function()
{
    $('#myMenu').on('click','a',function()
    {
        // fade out all open subcontents
        $('.subcontent:visible').fadeOut();
        // fade in new selected subcontent
        $('.subcontent[id='+$(this).attr('data-id')+']').fadeIn();
    });
});
</script>

<style type="text/css">
    div.subcontent { display:none; }
</style>

我们使用$（'＃myMenu'）注册事件处理程序.on（..）女巫侦听链接元素（a）上的点击并淡出所有打开（可见）div。然后它以淡入开始。在这种情况下，淡出和淡入方法同时开始。使用回调函数，您可以相互调用这两个步骤。

jquery onclick加载div

2 个答案: