欢迎光临北屯市黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

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

时间:2022-10-16   来源:北屯市网站建设

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

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

<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>


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


本文标签:
新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

jq控制视频播放和暂停以及声音
jq控制视频播放和暂停以及声音

在网站开发的过程中,我们常常需要添加一些视频来让网站内容更加丰富,比如说网页中有一个按钮,点击按钮后...

PBOOTCMS图片水印不支持jpeg格式怎么处理?
PBOOTCMS图片水印不支持jpeg格式怎么处理?

在使用PBOOT的时候,我们发现在后台开启了上传图片时给图片打上水印的功能,但是客户在上传图片的时候始终打...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top