#javascript #html #jquery #css
#javascript #HTML #jquery #css
Вопрос:
У меня есть список, и когда пользователь наводит курсор мыши или щелкает по списку, соответствующее изображение отображается справа.
Ниже приведен скрипт, который я использую для добавления и удаления активного класса из тегов li.
$(".listWrap ul li").hover(
function() {
$(this).addClass('active');
},
function() {
if (!$(this).hasClass('clicked')) {
$(this).removeClass('active');
}
}
);
$(".listWrap ul li").click(function() {
$(this).toggleClass('clicked');
});
.listWrap li.active a {
color: #f00;
}
.hoverimg li {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<section class="">
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="listWrap">
<ul>
<li><a href="javascript:void(0);">qwerqwer</a></li>
<li><a href="javascript:void(0);">tyuityui</a></li>
<li><a href="javascript:void(0);">opoiuiop</a></li>
<li><a href="javascript:void(0);">mnbvzxcv</a></li>
<li><a href="javascript:void(0);">zxcmnbv</a></li>
<li><a href="javascript:void(0);">mnbvzxcv</a></li>
</ul>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="listWrap position-relative">
<div class="hoverimg">
<ul>
<li><img src="https://dummyimage.com/600x400/fa17fa/0011ff" alt=""></li>
<li><img src="https://dummyimage.com/600x400/000000/0011ff" alt=""></li>
<li><img src="https://dummyimage.com/600x400/1ee81e/0011ff" alt=""></li>
<li><img src="https://dummyimage.com/600x400/1e35e6/0011ff" alt=""></li>
<li><img src="https://dummyimage.com/600x400/e6d620/0011ff" alt=""></li>
<li><img src="https://dummyimage.com/600x400/fff320/0011ff" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Ответ №1:
Вероятно, вы можете использовать индекс для скрытия отображения изображений с помощью hide()
/ show()
:
$('.listWrap ul li:eq(0)').addClass('active'); // add class on page load to the first linnk
$('.hoverimg ul li:eq(0)').show(); // show the first image li on page load
$(".listWrap ul li").hover(
function() {
$('.listWrap ul li').removeClass('active'); // remove class all of the link li elements
$('.hoverimg ul li').hide(); // hide all image li elements
$(this).addClass('active'); // add the class to the current element
var idx = $(this).index()-1;
$('.hoverimg ul li:eq(' idx ')').show(); // show the respective image li element
}
);
.listWrap li.active a {
color: #f00;
}
.hoverimg li {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<section class="">
<div class="container-fluid">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="listWrap">
<ul>
<li><a href="javascript:void(0);">qwerqwer</a></li>
<li><a href="javascript:void(0);">tyuityui</a></li>
<li><a href="javascript:void(0);">opoiuiop</a></li>
<li><a href="javascript:void(0);">mnbvzxcv</a></li>
<li><a href="javascript:void(0);">zxcmnbv</a></li>
<li><a href="javascript:void(0);">mnbvzxcv</a></li>
</ul>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="listWrap position-relative">
<div class="hoverimg">
<ul>
<li><img src="https://dummyimage.com/600x400/fa17fa/0011ff" alt=""></li>
<li><img src="https://dummyimage.com/600x400/000000/0011ff" alt=""></li>
<li><img src="https://dummyimage.com/600x400/1ee81e/0011ff" alt=""></li>
<li><img src="https://dummyimage.com/600x400/1e35e6/0011ff" alt=""></li>
<li><img src="https://dummyimage.com/600x400/e6d620/0011ff" alt=""></li>
<li><img src="https://dummyimage.com/600x400/fff320/0011ff" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Комментарии:
1. У меня равное количество элементов. Я забыл его обновить. Позвольте мне обновить его
2. Я добавил последнее изображение в вопросе. Я попробовал ваш ответ. 1) он удаляет активный класс из li 2) Он отображает последнее изображение li.
3. Я снова проверил ваш ответ после обновления, спасибо за ответ, но у меня возникают некоторые проблемы, можете ли вы мне помочь? 1) Если я наведу курсор на все по одному, то в конце я не получаю изображение. 2) загрузка последнего отображения изображения. Я должен отобразить первый
4. @user9437856, тогда то, что вы хотите оставить на мыши?
5. @Manun, да, для меня это работает идеально. Спасибо за помощь. Я хочу знать, откуда вы изучаете сценарии? любое видео или любой курс?