Изменение содержимого Div путем нажатия ссылки с использованием JavaScript - PullRequest
Новая
       6

Изменение содержимого Div путем нажатия ссылки с использованием JavaScript

0 голосов
/ 05 мая 2020

Итак, я делаю сайт, на котором ребята могут увидеть все доступные стажировки. Для этого я использовал 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>

Вот изображение того, что я делаю. введите описание изображения здесь

...