Question

我为html容器创建了这个内容切换器，在两个不同的内容之间切换，一个用于关于我，一个用于我的投资组合，我在jQuery中完成了这个。但我认为代码很便宜。

如何改进此代码？

$(function() {
    $('.tekstBallon').click(function() {
        if ($('.tekstBallon p').text() === "Klik hier voor mijn portfolio") {

            $('.container:nth-of-type(1) .col-13 .tekstBallon p').text('Over ons');

            $('.container:nth-of-type(1) .col-23 .textBox h2').text('Portfolio');

            $('.container:nth-of-type(1) .col-23 .textBox p').html('\
            <p>content</p> <br> <br> \n\
            <ol>\n\
                <li><a href="http://www.google.com/">Portfolio item</a></li>\n\
                <li><a href="http://www.google.com/">Portfolio item</a></li>\n\
            </ol>\n\
            ');
        } else {
            $('.container:nth-of-type(1) .col-13 .tekstBallon p').text('Klik hier voor mijn portfolio');

            $('.container:nth-of-type(1) .col-23 .textBox h2').text('Over ons');
            $('.container:nth-of-type(1) .col-23 .textBox p').text("content2");
        }
    });
});

对于HTML：

    <div class="container">
        <div class="row">
            <div class="col-13" style="height: auto;">
                <div class="imageBox">
                    <img src="assets/images/rik.jpg" alt="" >
                </div>

                <div class="tekstBallon">
                    <div class="triangle"></div>

                    <div class="tb-content">
                        <p>Klik hier voor mijn portfolio</p>
                    </div>
                </div>
            </div>

            <div class="col-23">
                <div class="textBox" style="padding-bottom: 600px; margin-bottom: -600px">
                    <div class="tb-content">
                        <h2>Over ons</h2>
                        <p>DiD-Zeeland is een IT-bedrijf die zorgt dat de klant krijgt waar ze 
                            om vragen, voor een betaalbare prijs. Eén van de streven van 
                            DiD-Zeeland, is om een goede naam te krijgen binnen Zeeland 
                            als het gaat om IT-klussen voor de thuisgebruiker, maar ook voor bedrijven.</p>

                    </div>
                </div>

            </div>
        </div>
    </div>

Answer 1

通常情况下，人们会准备2个div，隐藏一个，然后在点击时在display之间切换none/block。

在jQuery中，您可以使用$(selector).toggle()。

jQuery HTML内容切换器

1 个答案: