所以当人们看到所有可用的实习机会时,我正在建立一个网站。为此,我使用了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> 1-2 Weeks</p>
<p><i class="fas fa-map-marker-alt"></i> 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> 1-2 Weeks</p>
<p><i class="fas fa-map-marker-alt"></i> 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> 1-2 Weeks</p>
<p><i class="fas fa-map-marker-alt"></i> 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> 1-2 Weeks</p>
<p><i class="fas fa-map-marker-alt"></i> 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
[如果您不希望它重定向,则可以将#放在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';
} )
})