Question

所以我有10个列表元素，每个元素都与不同的内容相关联。

我希望能够点击其中一个列表元素并让div显示与之关联的内容。

我只希望一次显示一个内容。

<div class="contentSection">
    <ul class="serviceListContent anchorTag">
        <li class="contentLink step1"><a href="#">Establishing Your Property's Value</a>
        </li>
        <li class="contentLink step2"><a href="#">Selecting an Estate Agent</a>
        </li>
        <li class="contentLink step3"><a href="#">Preparing Your Property</a>
        </li>
        <li class="contentLink step4"><a href="#">Viewings</a>
        </li>
        <li class="contentLink step5"><a href="#">Negotiation</a>
        </li>
        <li class="contentLink step6"><a href="#">Agreeing The Sale</a>
        </li>
        <li class="contentLink step7"><a href="#">Initiating The Sale Process</a>
        </li>
        <li class="contentLink step8"><a href="#">Conveyancing</a>
        </li>
        <li class="contentLink step9"><a href="#">Finance</a>
        </li>
        <li class="contentLink step10"><a href="#">The Chain</a>
        </li>
    </ul>
</div>
<div class="contentSection">
    <div class="linkContent step1"></div>
    <div class="linkContent step2"></div>
    <div class="linkContent step3"></div>
    <div class="linkContent step4"></div>
    <div class="linkContent step5"></div>
    <div class="linkContent step6"></div>
    <div class="linkContent step7"></div>
    <div class="linkContent step8"></div>
    <div class="linkContent step9"></div>
    <div class="linkContent step10"></div>
</div>

Answer 1

也许你可以看看jquery手风琴。我怀疑这就是你要找的东西。

http://code.tutsplus.com/tutorials/exactly-how-to-create-a-custom-jquery-accordion--net-2690

Answer 2

使用html，你可以做这样的事情

使用您要显示的步骤类名的值为列表项添加自定义属性

<li class="contentLink step1" data-showstep="step1"><a href="#">Establishing Your Property's Value</a>

然后向ul添加一个事件处理程序，它将拉出该自定义属性的值，然后循环遍历所有linkContent div，如果它的类名与所单击的data-togglestep属性的值相匹配它将添加“显示”类，否则它将删除“显示”类，如果它没有

    $('ul.serviceListContent.anchorTag').on('click', 'li.contentLink', function () {
        var step = $(this).data('showstep');

        $('div.linkContent').each(function(){
            var $content = $(this);
            $content.toggleClass('showing', $content.hasClass(step));
        });
    });

使用此功能，您还需要确保默认情况下隐藏您的内容（或者只选择一个要显示的内容）

div.linkContent{
    display: none;
}
div.linkContent.showing{
    display: block;
}

这是一个小提琴：http://jsfiddle.net/silentvexx/q7ajd7ok/2/

Answer 3

<body>
    <div class="contentSection">
    <ul class="serviceListContent anchorTag">
        <li class="contentLink step1"><a href="#">Establishing Your Property's Value</a>

        </li>
        <li class="contentLink step2"><a href="#">Selecting an Estate Agent</a>

        </li>
        <li class="contentLink step3"><a href="#">Preparing Your Property</a>

        </li>
        <li class="contentLink step4"><a href="#">Viewings</a>

        </li>
        <li class="contentLink step5"><a href="#">Negotiation</a>

        </li>
        <li class="contentLink step6"><a href="#">Agreeing The Sale</a>

        </li>
        <li class="contentLink step7"><a href="#">Initiating The Sale Process</a>

        </li>
        <li class="contentLink step8"><a href="#">Conveyancing</a>

        </li>
        <li class="contentLink step9"><a href="#">Finance</a>

        </li>
        <li class="contentLink step10"><a href="#">The Chain</a>

        </li>
    </ul>
</div>
<div class="contentSection">
    <div class="linkContent step1"></div>
    <div class="linkContent step2"></div>
    <div class="linkContent step3"></div>
    <div class="linkContent step4"></div>
    <div class="linkContent step5"></div>
    <div class="linkContent step6"></div>
    <div class="linkContent step7"></div>
    <div class="linkContent step8"></div>
    <div class="linkContent step9"></div>
    <div class="linkContent step10"></div>
</div>

</body>
<script>
    window.onload = function () {
        var el = document.querySelectorAll(".contentLink");

        for (var i = 0; i < el.length; i++) {
            el[i].addEventListener('click', eventFunction, false);
        }

        function eventFunction() {

            var subString = this.className.replace("contentLink ", "");
            var divEle = document.querySelector(".linkContent." + subString);
            divEle.innerHTML = this.querySelector("a").text;
        }
    }
</script>

添加和删除类以更改div的内容？

3 个答案:

添加和删​​除类以更改div的内容？

3 个答案:

添加和删除类以更改div的内容？