![](/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.