Question

再次使用jsfiddle中的代码：https://jsfiddle.net/4qq6xnfr/9/，所以我遇到了问题，当我从第一列中选择5个链接中的一个时，我得到第二个div以显示3个链接，再次点击他们我得到第三个div与第四个div中的文本链接。这里的问题是在我从第一个div中选择一个链接后，我得到第二个，在我从第二个中选择一个后，我得到一个thrid div（列），它在所有div中显示相同的数据。基本上这第一个叫做felge（轮子）的链接工作正常，但问题是如果我选择别的东西而不是felge，我需要在第三个div中使用不同的文本

 <div class="col-md-2">
    <div class="div" id="subcontent1">
        <ul class="nav nav-pills nav-stacked" id="menu">
            <li><a href="javascript:showtreci('treci1')" id="treci1">RS-6</a></li>
            <li><a href="javascript:showtreci('treci2')" id="treci2">RB</a></li>
            <li><a href="javascript:showtreci('treci3')" id="treci3">KR-A</a></li>
        </ul>
    </div>

    <div class="div" id="subcontent2">
        <ul class="nav nav-pills nav-stacked" id="menu">
            <li><a href="javascript:showtreci('treci4')" id="treci4">ENKEI92</a></li>
            <li><a href="javascript:showtreci('treci5')" id="treci5">EDR9</a></li>
            <li><a href="javascript:showtreci('treci6')" id="treci6">YS5</a></li>
        </ul>
    </div>

    <div class="div" id="subcontent3">
        <ul class="nav nav-pills nav-stacked" id="menu">
            <li><a href="javascript:showtreci('treci7')" id="treci7">INTERFORM</a></li>
            <li><a href="javascript:showtreci('treci8')" id="treci8">TWEAKD SILVER</a></li>
            <li><a href="javascript:showtreci('treci9')" id="treci9">HELIX BLACK</a></li>
        </ul>
    </div>

    <div class="div" id="subcontent4">
        <ul class="nav nav-pills nav-stacked" id="menu">
            <li><a href="javascript:showtreci('treci10')" id="treci10">INFORM</a></li>
            <li><a href="javascript:showtreci('treci11')" id="treci11">TWD SILVER</a></li>
            <li><a href="javascript:showtreci('treci12')" id="treci12">HELACK</a></li>
        </ul>
    </div>
</div>

如果我按下gume，我尝试使用第四个子内容添加不同的文本，但这不起作用。任何想法该怎么做？

Answer 1

我并不完全理解这个问题，但我认为可以通过JQUERY轻松解决。如果你可以使用JQUERY，隐藏和显示div很容易。这是一个JS小提琴示例供您查看。

<强> https://jsfiddle.net/7jmdsaj3/

JQUERY

$( ".btn" ).click(function() {
    $(".content").hide();
    var ok = $(this).attr('id');
    $('.'+ok+'.content').fadeIn();
});

HTML

<div id="one" class="btn">one</div>
<div id="two" class="btn">two</div>
<div id="three" class="btn">three</div>
<div id="four" class="btn">four</div>

<div class="one content">here is the content for one</div>
<div class="two content">two two two</div>
<div class="three content">third area of content is here</div>
<div class="four content">44 4 4 4 4 4 4 4 4</div>

CSS

.content{
    display:none;
}

使用链接

1 个答案: