Nội dung của trang của tôi được chuyển đổi bằng các liên kết khác nhau, hiển thị một div cùng một lúc bằng cách sử dụng chức năng 'showonlyone' của jQuery. Khi tải trang, không có div nào được hiển thị. Tôi đã làm cho nó hoạt động tốt, cho đến khi tôi cố gắng đặt một thanh trượt hình ảnh (bxSlider) trong một trong các div, newboxes1.bxSlider trong hiển thị/ẩn số div
Bên ngoài hộp, bxSlider hoạt động tốt. Trong đó, những hình ảnh không hiển thị. Xem ví dụ trực tiếp here.
Đây là những gì mã của tôi trông giống như:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}</script>
</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
var slider = $('#slidersample').bxSlider({
mode:'fade',
controls: false
});
$('#bx-prev-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#hover-next-g-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#bx-next-sample').click(function(){
slider.goToNextSlide();
return false;
});
$('#hover-next-d-sample').click(function(){
slider.goToNextSlide();
return false;
});
});
});
</script>
</head>
<body>
<div id="left-menu">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br />
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br />
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a>
</div>
<div class="newboxes" id="newboxes1">DIV 1
<!-- SLIDER -->
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px">
<div class="bx-prev"><div id="bx-prev-sample">←</div></div>
<div class="bx-next"><div id="bx-next-sample">→</div></div>
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div>
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div>
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px">
<li><img src="images/1.jpg" width="580" height="375" /></li>
<li><img src="images/2.jpg" width="580" height="375" /></li>
<li><img src="images/3.jpg" width="580" height="375" /></li>
</ul>
</div>
<!-- SLIDER END-->
</div>
<div class="newboxes" id="newboxes2">DIV 2<br /></div>
<div class="newboxes" id="newboxes3">DIV 3</div>
</body>
</html>
tôi sử dụng
.newboxes {display:none;}
trong CSS để không ai trong số các divs được hiển thị khi trang đang tải. Loại bỏ điều này khỏi CSS giải quyết vấn đề bxSlider, như bạn có thể thấy here. Tuy nhiên, nội dung được hiển thị khi trang được tải, trong khi tôi muốn tất cả nội dung đó bị ẩn. Mọi nỗ lực sử dụng display:block hoặc display:none ở nơi khác trong mã đã không thành công.
Có ai có thể nghĩ ra cách sửa lỗi này không? Cảm ơn bạn.
Đây là giải pháp tuyệt vời. Cảm ơn ý tưởng !! –