通过使用JavaScript单击链接来更改Div的内容

Question

所以当人们看到所有可用的实习机会时，我正在建立一个网站。为此，我使用了ul和li进行导航菜单。当我单击其他链接时，页面应相应地更改内容而无需重定向。感谢您的帮助/指导。

这里是我的HTML

<!-- Internship Page Detais -->
    <section>
        <div class="container">
            <div class="row hr-bar">
                <div class="col">
                    <label><a href="/home"></a><i class="fas fa-arrow-circle-left"></i> Back</a></label>
                    <ul class="type">
                        <li><a href="" class="active">Internships</a></li>
                        <li><a href="" id="op2">Part Time Jobs</a></li>
                        <li><a href="" id="op3">Full Time Jobs</a></li>
                        <li><a href="" id="op4">Quick Money</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="container" id="jobs">
            <!-- Internships -->
            <article id="internships">
                <div class="row">
                    <div class="col-md-4 col-sm-6 intern-list-items">
                        <a href="">
                            <figure><img src="swiggy.png" alt="zomato"></figure>
                            <h1>Data Analysis For Swiggy</h1>
                            <h6>Earn Upto 500Rs to 2000Rs</h6>
                            <p><i class="far fa-calendar-alt"></i>&nbsp;&nbsp;1-2 Weeks</p>
                            <p><i class="fas fa-map-marker-alt"></i>&nbsp;&nbsp;Multiple Pincodes</p>
                            <button class="btn-blue-inverse"> <a href="">View Internship</a></button>
                        </a>
                    </div>
                </div>
            </article>

            <!-- Part-Time -->
            <article id="part-time">
                <div class="row">
                    <div class="col-md-4 col-sm-6 intern-list-items">
                        <a href="">
                            <figure><img src="swiggy.png" alt="zomato"></figure>
                            <h1>Data Analysis For Swiggy</h1>
                            <h6>Earn Upto 500Rs to 2000Rs</h6>
                            <p><i class="far fa-calendar-alt"></i>&nbsp;&nbsp;1-2 Weeks</p>
                            <p><i class="fas fa-map-marker-alt"></i>&nbsp;&nbsp;Multiple Pincodes</p>
                            <button class="btn-blue-inverse"> <a href="">View Job</a></button>
                        </a>
                    </div>
                </div>
            </article>

            <!-- Full Time -->
            <article id="full-time">
                <div class="row">
                    <div class="col-md-4 col-sm-6 intern-list-items">
                        <a href="">
                            <figure><img src="swiggy.png" alt="zomato"></figure>
                            <h1>Data Analysis For Swiggy</h1>
                            <h6>Earn Upto 500Rs to 2000Rs</h6>
                            <p><i class="far fa-calendar-alt"></i>&nbsp;&nbsp;1-2 Weeks</p>
                            <p><i class="fas fa-map-marker-alt"></i>&nbsp;&nbsp;Multiple Pincodes</p>
                            <button class="btn-blue-inverse"> <a href="">View Job</a></button>
                        </a>
                    </div>
                </div>
            </article>

            <!-- Quick Money -->
            <article id="quick-money">
                <div class="row">
                    <div class="col-md-4 col-sm-6 intern-list-items">
                        <a href="">
                            <figure><img src="swiggy.png" alt="zomato"></figure>
                            <h1>Data Analysis For Swiggy</h1>
                            <h6>Earn Upto 500Rs to 2000Rs</h6>
                            <p><i class="far fa-calendar-alt"></i>&nbsp;&nbsp;1-2 Weeks</p>
                            <p><i class="fas fa-map-marker-alt"></i>&nbsp;&nbsp;Multiple Pincodes</p>
                            <button class="btn-blue-inverse"> <a href="">View Job</a></button>
                        </a>
                    </div>
                </div>
            </article>
        </div>
    </section>

[当我单击“假设兼职”时，.active类也应更改，它只是蓝色的底边。我尝试使用此javascript，但似乎并未正确考虑如何实现。

<script>
    var list = document.querySelectorAll('.type li a')
    list.forEach(function(e){
       e.addEventListener('click',function(){
            var selected = this.innerHTML
            if(selected == 'Part Time Jobs'){
                console.log(true);                
            }
        })
    })
</script>

这是我做的东西的图像。enter image description here

Answer 1

[如果您不希望它重定向，则可以将＃放在href内。像这样的东西

<li><a href="#" id="op2">Part Time Jobs</a></li>

现在让我们进入Javascript部分。如果您想更改列表项的文本内容，可以使用以下代码进行操作]

var list = document.querySelectorAll('.type li')


list.forEach(function(e){
e.addEventListener('click', function (){
    var selected = this.textContent; // save old text content
    this.textContent = 'changed';
} )

})