0

我可以知道是否可以在 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，但没有一个符合我想要的..

先感谢您！

4

2 回答 2

2

你为什么不使用标签/类似的东西。无论如何，您可以这样做，但在此之前，请以这种方式更改 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>s 和<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();
});
于 2013-03-24T13:37:51.827 回答
0

hy

在 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。然后它从淡入开始。在这种情况下，淡出和淡入方法同时开始。使用回调函数，您可以依次调用这 2 个步骤。

于 2013-03-24T14:03:36.687 回答