新闻中心 网络推广 网站建设 优化推广

如何用下拉选择框做跳转。

有时候我们需要用到下拉选择框,来做跳转。我们提供两个方法。

第一个方法就是原生的下拉框:

<div class="footer-select">
<select class="footer_sel" id="FriendLink">
<option selected="selected" value="#">请选择</option>
<option  value="http://www.zuoan.com.cn/">黑马视觉</option>
<option value="http://www.509k.com">成都网站建设</option>
</select>
</div>

第二步:引入JQ

第三步:

添加JS

<script>
	(function (window, $) {
    function init() {
        bindEvt();
    }
    init();
    function bindEvt() {
        $("#FriendLink").bind("change",function() {
            var selectedHref = $("#FriendLink :selected").val();
            if (selectedHref != "") {
                window.open(selectedHref);
            }
        });           
    } 
})(window, jQuery);

</script>

这种方法的缺点就是样式下拉框中的样式没法调整,是原生态的效果。



第二种方法:使用LAYUI的下拉

步骤:

1:引入CSS和JS

2:写HTML

<div class="layui-block d-block d-sm-none mb-3">
    <ul class="layui-nav  layui-bg-gray"  lay-filter="test">
      <li class="layui-nav-item">
        <a  href="javascript:;">请选择你要查看的内容</a>

        <dl class="layui-nav-child">
 <dd><a href="http://www.zuoan.com.cn">黑马视觉</a></dd>
<dd><a href="http://www.zuoan.com.cn">黑马视觉</a></dd>	 
 <dd><a href="http://www.zuoan.com.cn">黑马视觉</a></dd>
<dd><a href="http://www.zuoan.com.cn">黑马视觉</a></dd>	 
        </dl>
      </li>
       
    </ul>

  </div>

3:

添加JS

 <script>

layui.use(['element', 'form'], function(){
  var element = layui.element;
  element.on('nav(test)', function(elem){
    console.log(elem)
  });
});
</script>


4:根据自己的需求修改CSS,比如说修改的:

<style>
  .layui-block{border:1px solid #ddd;}
  .layui-nav{padding:0;}
  .layui-nav .layui-nav-more{right:15px;    margin-top: 10px;}
  .layui-nav .layui-nav-item{display: block; line-height:24px!important; padding:10px 0;}
  .layui-nav .layui-nav-item a{color:#333!important;}
  .layui-nav .layui-nav-item:hover{color:#333!important;}
  .layui-nav-child{top:50px;}
</style>


以上两种方法,当然我们推荐第二种,更灵活一些。


网站TAG标签: 北京 行业 营销 建站 技术 平台 定制 系统 互联网 门户 发展 体验 经验 内容 手机 全球 中国 展示 合作 业务 搜索 电子 团队 项目 更多 运营 页面 商城 集团 售后 风格 价值 优势 做网站 响应式 发布 方式 维护 软件 效果 分析 工作 动态 过程 分享 广告 seo 商业 时间 资讯 打造 相关 优秀 工程 更好 原创
留言

免费通话    15899750475

工作时间:8:30-12:00;13:30-17:00

请输入您的电话,我们会及时联系您!

电话

关注公众号

 
微信
Top