Question

所以，昨天我得到了我的html代码的建议，当我按下一个链接时，它会显示带文本的div。

在我得到一个div显示之后知道了一个例子，如果我点击“felge”（在英语轮子中）我得到BBS ENKEI和KONIG，我想让这三个也可点击以获得他们旁边的第三个div ，基本上，当我从第一个div中选择轮子时，bbs，enkei和konig出现，然后这些也是可点击的，然后我可以从第二个div中选择其中一个来显示第三个。

我试过了：

 <div class="col-md-2">
        <ul class="nav nav-pills nav-stacked" id="menu">
            <li><a href="javascript:show('link1')" id="link1">Felge</a></li>
            <li><a href="javascript:show('link2')" id="link2">Gume</a></li>
            <li><a href="javascript:show('link3')" id="link3">Branici</a></li>
            <li><a href="javascript:show('link4')" id="link4">Farovi</a></li>
        </ul>
    </div>

    <div class="col-md-3">
        <div class="nav nav-pills nav-stacked div" id="content1">
            <ul>
             --->   <li><a href="javascript:show('felga1')" id="felgaLink1">BBS</a></li>
                <li><a href="javascript:show('felga2')" id="felgaLink2">ENKEI</a></li>
                <li><a href="javascript:show('felga3')" id="felgaLink3">KONIG</a></li>
            </ul>
        </div>

        <div class="div" id="content2">
                <p>Michelin</p>
                <p>Hankook</p>
                <p>Sava</p>
        </div>

        <div class="div" id="content3">
            <p>AMG</p>
            <p>Brabus</p>
            <p>Original</p>
        </div>

        <div class="div" id="content4">
            <p>Angel Eyes</p>
            <p>Devil Eyes</p>
            <p>Original</p>
        </div>
    </div>

我在第二个div中添加了一个href，它在上面的代码中用箭头标记并使用不同的名称执行相同的脚本，就像第一个hide / show div一样，但它不能正常工作。我该怎么做？

Answer 1

希望这可以帮助您添加子内容div

 <div class="col-md-4">
    <div class="div" id="subcontent1">
        <p>BBS</p>
        <p>ENKEI</p>
        <p>KONIG</p>
    </div>
    <div class="div" id="subcontent2">
        <p>Michelin</p>
        <p>Hankook</p>
        <p>Sava</p>
    </div>
    <div class="div" id="subcontent3">
        <p>AMG</p>
        <p>Brabus</p>
        <p>Original</p>
    </div>
    <div class="div" id="subcontent4">
        <p>Angel Eyes</p>
        <p>Devil Eyes</p>
        <p>Original</p>
    </div>
</div>`

并添加另一个javascript函数

function showsub(id) {
    var number = id.replace('sublink', '');
    var blocks = document.querySelectorAll("[id^=subcontent");
    for (var i = 0; i < blocks.length; i++) {
        blocks[i].style.display = 'none';
    }
    document.querySelector('#subcontent' + number).style.display = 'block';
}



function show(id) {
    var number = id.replace('link', '');
    var blocks = document.querySelectorAll("[id^=content");
    var subblocks = document.querySelectorAll("[id^=subcontent");
    for (var i = 0; i < blocks.length; i++) {
        blocks[i].style.display = 'none';
    }
    for (var j = 0; j < subblocks.length; j++) {
        subblocks[j].style.display = 'none';
    }
    document.querySelector('#content' + number).style.display = 'block';
}

根据您需要的位置定位

第二次隐藏并显示带链接的div

1 个答案: