前端实现选择列表功能的精美页面

红太狼 2022-02-24 12:42 482阅读 0赞

### ***先来一下最终效果吧*** ###

![20190404092453899.gif][]

--------------------

亮点元素

1、jquery

2、bootstrap框架

--------------------

完整代码如下

<!DOCTYPE html>
    <html>
    <head>
       <meta charset="utf-8"> 
       <title>Bootstrap 实例 - 响应式的列重置</title>
       <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
       <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
       <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    		<style>
    			ul li{
    				float:left;
    				margin-left:3%;
                    padding-top:2%;
    			}
    			#uli{
    			    width:100%;
    				height:40px;
    				background-color:#337ab7;
    				color:#ffffff;
    				margin-top:2%;
    				margin-left:-2%;
    			}
    	</style>
    <body>
    
    <div class="container">
       <div class="row" >
    <button id="fat-btn" class="btn btn-primary"  type="button" onclick="show();">请选择种类</button>
    <span id="tresult"></span>
       </div>
    	<ul style="list-style:none;" id="uli">
    		<li>五谷杂粮</li>
    		<li>水产类</li>
    		<li>土地</li>
    		<li>蔬菜</li>
    		<li>水果</li>
    		<li>花生坚果类</li>
    		<li>茶树类</li>
    		<li>鲜花类</li>
    		<li>其他</li>
    		<li></li>
    	</ul>
    	</div>
    </body>
    	<script>
    		function show(){
    		var status=$("#uli").css('display');
    			if(status=="none"){
    			$("#uli").show();
    			}else{
    			$("#uli").hide();
    			}
    			
    		}
    
           $(document).ready(function(){
                  var Uarry=$("#uli li");
    //获取所有的li元素
                  $("#uli li").click(function(){
    //点击事件
                       //测试直接获取值 
    var v=$(this).text(); 
                       $("#tresult").text(v);
                  }) 
           })
    	</script>
    </html>

[20190404092453899.gif]: /images/20220224/29a0cc311ae7461bb598403100de1687.png