<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body class="body">
<div class="showView">
<ul>
<li><img src="http://img6.bdstatic.com/img/image/smallpic/weimei1108.jpg"/></li>
<li><img src="http://img6.bdstatic.com/img/image/smallpic/chongwu1108.jpg"/></li>
<li><img src="http://img6.bdstatic.com/img/image/smallpic/mingxing1108.jpg"/></li>
<li><img src="http://img6.bdstatic.com/img/image/smallpic/touxiang1108.jpeg"/></li>
</ul>
</div>
<select name="select" class="choose" >
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>
</body>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
$('.showView ul li').eq(0).show().siblings().hide()
$('.choose').on('change', function (){
var index = $(this).val() - 1
$('.showView ul li').eq(index).show().siblings().hide()
})
</script>
</html>
你看的这个页面是 CSS 禅意花园。
添加下拉菜单，可以使用第三方UI库，例如 bootstrap 中的 dropdown 组件实现.
具体组件的配置你去官网看看就行。
dropdown
你好，html自带的select元素，是不支持option中带图片的，所有如果想实现的特殊select，必须自己编写一个功能类似select的下拉框我实现了一个简单的，你看下就会了，我用的箭头代表的三角，你直接把<img src="0.jpg">放在li中即可
<html>
<head>
<style>
ul{list-style-type:none}
li{border:solid 1pxwidth:100px}
.liShow{display:blockbackground:while}
.liHide{display:nonebackground:blue}
</style>
<script>
var nextState=1
function change(obj){
var liArray=document.getElementsByTagName("LI")
var i=1
var length=liArray.length
switch(nextState){
case 1:
obj.innerHTML="选择数量↑"
for(i<lengthi++){
liArray[i].className="liShow"
}
nextState=0
break
case 0:
obj.innerHTML="选择数量↓"
for(i<lengthi++){
liArray[i].className="liHide"
}
nextState=1
}
}
</script>
</head>
<body>
<ul id="myUl">
<li class="liMenu" onclick="change(this)">选择数量↓</li>
<li value="1" class="liHide">1</li>
<li value="1" class="liHide">2</li>
</ul>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）