Привет, ребята, я пытаюсь сделать что-то вроде слайдера, у меня есть 4 кнопки, которые при нажатии меня хотят изменить основное изображение и показать содержимое для каждого изображения, после небольшого просмотра и тестирования мне удалось получить изображение для изменения на hover, однако у меня возникают трудности с изменением содержимого div. Я пытался использовать дисплей none для других разделов контента и блокировать для активного, но я не могу связать все это, я мог бы сделать это,
$('#changeImage').attr('src', 'pic1.png');
},
function() {
$(".content.one").css("display", "block");
},
function() {
$(".content.two").css("display", "none");
},
function() {
$(".content.three").css("display", "none");
},
function() {
$(".content.four").css("display", "none");
}
)
однако изменяется только содержимое.content.one и только когда я выхожу из мыши. Надеюсь, что я ясно дал понять, что мой английский не так хорош, если я могу помочь прояснить все, что можно попросить.
вот весь скрипт java
<script type="text/javascript">
$(document).ready(function() {
$("ul li:nth-child(1)").hover(
function () {
$('#changeImage').attr('src', 'pic1.png');
},
function() {
$(".content.one").css("display", "block");
},
function() {
$(".content.two").css("display", "none");
},
function() {
$(".content.three").css("display", "none");
},
function() {
$(".content.four").css("display", "none");
}
);
$("ul li:nth-child(2)").hover(
function () {
$('#changeImage').attr('src', 'pic2.png');
}
);
$("ul li:nth-child(3)").hover(
function () {
$('#changeImage').attr('src', 'pic3.png');
}
);
$("ul li:nth-child(4)").hover(
function () {
$('#changeImage').attr('src', 'pic4.png');
},
function() {
$(".content.one").css("display", "none");
},
function() {
$(".content.two").css("display", "none");
},
function() {
$(".content.three").css("display", "none");
},
function() {
$(".content.four").css("display", "block");
}
);
});
</script>
и весь html
<div id="wrapper">
<img src="clear.png">
<ul id="side-bar">
<li class="one"><a href="#"><img src="1-1.png"
onmouseover="this.src='1-2.png'"
onmouseout="this.src='1-1.png'"></a></li>
<li class="two"><a href="#"><img src="2-2.png"></a></li>
<li class="three"><a href="#"><img src="3-1.png"
onmouseover="this.src='3-2.png'"
onmouseout="this.src='3-1.png'"></a></li>
<li class="four"><a href="#"><img src="4-1.png"
onmouseover="this.src='4-2.png'"
onmouseout="this.src='4-1.png'"></a></li>
</ul>
<div id="image"><img id="changeImage" src="pic1.png"></div>
<div id="content-wrapper"><img src="content.png"></div>
<div class="content one"><p>content 1</p><a href="#" class="more">read more...</a></div>
<div class="content two"><p>content 2</p><a href="#" class="more">read more...</a></div>
<div class="content three"><p>content 3</p><a href="#" class="more">read more...</a></div>
<div class="content four"><p>content 4</p><a href="#" class="more">read more...</a></div>
</div>
Вы неправильно используете.hover(). Hover выполняет две функции в качестве параметров: функцию, выполняемую при наведении курсора мыши, и функцию, выполняемую при мыши. Например:
$(function() {
$('#my-id').hover(
// mouse over
function() {
$('#foo').show();
$('#bar').addClass('baz');
},
// mouse out
function() {
$('#foo').hide();
$('#bar').removeClass('baz');
});
});
В коде вы передаете четыре функции в качестве параметров вызова наведения, привязанного к элементу "ul li: nth-child (1)". Во всех ваших других обработчиках событий hover вы передаете только одну функцию.