![](/img/trans.png)
[英]How can i change background image of the page when i click on navigation menu link using Javascript?
[英]How can I change an image when I click a link with BxSlider?
我使用jQuery插件BxSlider 。 我想展示这一部分,我的意思是一张图片,
<li id="miori"><img src="http://images.ciatr.jp/2015/12/09202601/05c36a2c5ba65065ac4f2a6f6c75b3e1_55.jpeg"></li>
当我单击以下部分时。
<dd id="miori"><a href="">miori</a></dd>
我该如何为该运动编写JavaScript代码? 您能给我一些建议吗?
<html>
<head>
<title>bxslider</title>
<link href="/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<dl class="sample">
<dt>menu</dt>
<dd id="tao"><a href="">tao</a></dd>
<dd id="miori"><a href="">miori</a></dd>
</dl> <!-- sample -->
<ul class="bxslider">
<li id="tao"><img src="http://koi-navi.net/wp-content/uploads/2015/10/5e9dd24e-e1444440113499.jpg"> </li>
<li id="miori"><img src="http://images.ciatr.jp/2015/12/09202601/05c36a2c5ba65065ac4f2a6f6c75b3e1_55.jpeg"></li>
</ul> <!-- bxslider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/jquery.bxslider/jquery.bxslider.min.js" type="text/javascript" ></script>}
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
$('dd#miori').on('click', function(){
alert("hello"); // what should I write here?
});
});
</script>
</body>
</html>
请参阅此: http : //bxslider.com/examples/thumbnail-pager-1
尝试这个:
<html>
<head>
<title>bxslider</title>
<link href="/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<!-- <dl class="sample">
<dt>menu</dt>
<dd id="tao"><a href="">tao</a></dd>
<dd id="miori"><a href="">miori</a></dd>
</dl> <!-- sample -->
<div id="bx-pager">
<a data-slide-index="0" href="">tao</a>
<a data-slide-index="1" href="">miori</a>
</div>
<ul class="bxslider">
<li id="tao"><img src="http://koi-navi.net/wp-content/uploads/2015/10/5e9dd24e-e1444440113499.jpg"> </li>
<li id="miori"><img src="http://images.ciatr.jp/2015/12/09202601/05c36a2c5ba65065ac4f2a6f6c75b3e1_55.jpeg"></li>
</ul> <!-- bxslider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/jquery.bxslider/jquery.bxslider.min.js" type="text/javascript" ></script>}
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider').bxSlider({pagerCustom: '#bx-pager'});
/*$('dd#miori').on('click', function () {
alert("hello"); // what should I write here?
});*/
});
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.