Question

对于一个页面，我有一个Divs网格（2乘3）和该网格左侧的菜单（<li>中的<lu>）。每个菜单部分都有自己的div网格，每个网格都包含在一个div中，以便于操作。

菜单部分：

<div id="sections">
        <ul>
            <li class="section1">Product</li>
            <li class="section2">Arcade Sticks</li>
            <li class="section3">Mobility</li>
            <li class="section4">Others</li>
            <li class="section5">Infography</li>
        </ul>
</div>

-

一些项目网格示例：

    <div id="grid1">
        <a class="project">Projet 1</a>
        <a class="project">Projet 2</a>
        <a class="project">Projet 3</a>
        <a class="project">Projet 4</a>
        <a class="project">Projet 5</a>
        <a class="project">Projet 6</a>
    </div>

    <div id="grid2">
        <a class="project" style="background-color:#330033;">Projet 1</a>
        <a class="project" style="background-color:#330033;">Projet 2</a>
        <a class="project" style="background-color:#330033;">Projet 3</a>
        <a class="project" style="background-color:#330033;">Projet 4</a>
        <a class="project" style="background-color:#330033;">Projet 5</a>
        <a class="project" style="background-color:#330033;">Projet 6</a>
    </div>

    <div id="grid3">
        <a class="project" style="background-color:#82b8d0;">Projet 1</a>
        <a class="project" style="background-color:#82b8d0;">Projet 2</a>
        <a class="project" style="background-color:#82b8d0;">Projet 3</a>
        <a class="project" style="background-color:#82b8d0;">Projet 4</a>
        <a class="project" style="background-color:#82b8d0;">Projet 5</a>
        <a class="project" style="background-color:#82b8d0;">Projet 6</a>
    </div>

对应于菜单第一部分（＃grid1）的网格显示在页面加载上，所有其他网格（＃grid2＃grid3等等）都被隐藏，带有Jquery .hide函数。

这是我的小Jquery脚本：

$("#project_grid div:not(#grid1)").hide();

for(var i = 1; i<=5; i++){

$(".section"+i).on('click', function()
{
    $("#content #project_grid div:not(#grid"+i).hide();
    $("#content #project_grid #project_large").hide();
    $("#content #project_grid #grid"+i).show();
});
}

我使用“i”var自动获取“section”类值之后的数字，并将其重用于Jquery脚本中的“grid”值。

div #project_large是另一组具有较大项目视图的div，在您单击网格中的一个缩略图后会弹出。我还没有考虑过代码：）

因此，当页面加载时，将显示与第一部分对应的网格，并隐藏其他网格。但是，当我单击菜单中的部分名称时，“display：none”的值将添加到“display：none”的样式中，而不会从其中删除。

我是编码的新手，所以有些东西可能看起来不对你：）

谢谢！

Answer 1

我会将你的html类更改为以下内容：

    <ul>
        <li class="section" data-grid="grid1">Product</li>
        <li class="section" data-grid="grid2">Arcade Sticks</li>
        <li class="section" data-grid="grid3">Mobility</li>
        <li class="section" data-grid="grid4">Others</li>
        <li class="section" data-grid="grid5">Infography</li>
    </ul>

<div id="grid1" class="grid">
    <a class="project">Projet 1</a>
    <a class="project">Projet 2</a>
    <a class="project">Projet 3</a>
    <a class="project">Projet 4</a>
    <a class="project">Projet 5</a>
    <a class="project">Projet 6</a>
</div>
<div id="grid2" class="grid">
    <a class="project" style="background-color:#330033;">Projet 1</a>
    <a class="project" style="background-color:#330033;">Projet 2</a>
    <a class="project" style="background-color:#330033;">Projet 3</a>
    <a class="project" style="background-color:#330033;">Projet 4</a>
    <a class="project" style="background-color:#330033;">Projet 5</a>
    <a class="project" style="background-color:#330033;">Projet 6</a>
</div>

然后你可以使用非常简单的jquery：

$('.section').click(function() {
    $('.grid').hide();
    $('#' + $(this).data('grid')).show();
});

Example

.hide /。显示div的网格不起作用

1 个答案: