m_Orchestrate learning system---八、下拉列表(select标签)如何实现链接功能

一、总结

一句话总结:option的值就是链接地址,选择事件为指向选中的option的值

1、button如何跳转?

button执行js函数,然后可以在js函数里面实现跳转

2、为什么要查看网页源代码?

多去看网页页面源代码,你就知道你的代码被解析成了什么样子了

3、表单中textarea和别的input标签不同之处在哪?

表单中textarea又和别的input标签不同,别的input标签的值使用value控制,而textarea需要写在标签中,也就是innerHTML

<textarea class="" rows="5" name="brief" id="user-intro" placeholder="Description" >{$dataout.brief}</textarea>

4、button如何最快最方便的实现跳转功能?

把页面中的所有要跳转的button标签改成a标签就解决问题了

把页面中的所有要跳转的button标签改成a标签就解决问题了,并且a标签可以做的和button一模一样,而且a标签页支持button的所有样式,所以从外观上来看是没有任何变化的

这样改了之后就不会出现边缘点击无法跳转的情况了

1 <a type="button" class="am-btn am-btn-default am-btn-success" href="{:url('discipline/add')}" style="color:#fff"><span class="am-icon-plus"></span> Add</a>

5、字符图标可以用什么标签来添加?

字符图标可以用span标签来添加

<a type="button" class="am-btn am-btn-default am-btn-xs am-text-danger"  href="{:url('discipline/delete',array('id'=>$vo.id))}"><span class="am-icon-trash-o"></span> Delete</a>

6、a标签如何实现点上级菜单出现下级菜单列表?

<a href="javascript:;" class="nav-link tpl-left-nav-link-list">

7、下拉列表(select标签)如何实现链接功能?

option的值就是链接地址,选择事件为指向选中的option的值

代码

1 <div class="am-form-group">
2 <select data-am-selected="{btnSize: 'sm'}">
3 <option value="option1">All Discipline</option>
4 {volist name="dataout" id="vo"}
5 <a href="http://www.baidu.com"><option value="{$vo.id}">{$vo.name}</option></a>
6 {/volist}
7 </select>
8 </div>

这样子要想实现目标得配合js,来判断select的选项改变,js我不熟了

所以可以换种思路,采用导航栏里面的下拉列表的方式

这里面都是a标签

代码如下:

 1 <li class="am-dropdown" data-am-dropdown>
2 <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
3 下拉 <span class="am-icon-caret-down"></span>
4 </a>
5 <ul class="am-dropdown-content">
6 <li class="am-dropdown-header">标题</li>
7 <li><a href="#">1. 去月球</a></li>
8 <li class="am-active"><a href="#">2. 去火星</a></li>
9 <li><a href="#">3. 还是回地球</a></li>
10 <li class="am-disabled"><a href="#">4. 下地狱</a></li>
11 <li class="am-divider"></li>
12 <li><a href="#">5. 桥头一回首</a></li>
13 </ul>
14 </li>

所以多看说明文档还是蛮不错的

最好的方式肯定还是能够直接用select下拉选择框的好

二、内容在总结中

 

项目地址

fry404006308/m_Orchestrate: m_Orchestrate
https://github.com/fry404006308/m_Orchestrate

m_Orchestrate learning system---八、下拉列表(select标签)如何实现链接功能的更多相关文章

  1. m_Orchestrate learning system---十八、mo项目的启示是什么

    m_Orchestrate learning system---十八.mo项目的启示是什么 一.总结 一句话总结:多看教程,体统看教程的学, 完全不懂的话百度的作用也不大 多学点,可以节约后面的超多时 ...

  2. js利用select标签生成简易计算功能

    html中使用select option作为运算符的承接容器,输入值,选择不同运算符,计算结果. 文章地址 https://www.cnblogs.com/sandraryan/ <!DOCTY ...

  3. m_Orchestrate learning system---二十八、字體圖標iconfont到底是什麼

    m_Orchestrate learning system---二十八.字體圖標iconfont到底是什麼 一.总结 一句话总结: 阿里巴巴 图标库 iconfont-阿里巴巴矢量图标库 1.表格的t ...

  4. m_Orchestrate learning system---九、在无法保证是否有图片的情况下,如何保证页面格式

    m_Orchestrate learning system---九.在无法保证是否有图片的情况下,如何保证页面格式 一.总结 一句话总结:都配上默认缩略图就可以解决了 1.如何获取页面get方式传过来 ...

  5. m_Orchestrate learning system---二十一、怎样写算法比较轻松

    m_Orchestrate learning system---二十一.怎样写算法比较轻松 一.总结 一句话总结:(1.写出算法步骤,这样非常有利于理清思路,这样就非常简单了 2.把问题分细,小问题用 ...

  6. html中select标签根据枚举获得值的总结

    不知不觉在公司一个多月了,这一个月做了一个支票申请的web页面功能,都不是特别难,审核有公司给的工作流,分页工具和很多公用工具公司也都给了,所以觉得难度都不是很大.今天主管让我们修改了以前做的项目的代 ...

  7. m_Orchestrate learning system---三十五、php数据和js数据的解耦:php数据(php代码)不要放到js代码中

    m_Orchestrate learning system---三十五.php数据和js数据的解耦:php数据(php代码)不要放到js代码中 一.总结 一句话总结:也就是以html为中介,用html ...

  8. m_Orchestrate learning system---三十一、模板和需求的关系

    m_Orchestrate learning system---三十一.模板和需求的关系 一.总结 一句话总结:模板为了适应广大用户,有很多功能样式,但是,你需要的只是部分,所以删掉不需要的,如果有需 ...

  9. m_Orchestrate learning system---二十九、什么情况下用数据库做配置字段,什么情况下用配置文件做配置

    m_Orchestrate learning system---二十九.什么情况下用数据库做配置字段,什么情况下用配置文件做配置 一.总结 一句话总结: 配置文件 开发人员 重置 数据库 非开发人员 ...

随机推荐

  1. 朴素的UNIX之-调度器细节

    0.多进程调度的本质 我们都知道UNIX上有一个著名的nice调用.何谓nice,当然是"好"了.常规的想法是nice值越大越好,实际上,nice值越好,自己的优先级越低.那么为何 ...

  2. 广东工业大学2016校赛决赛-网络赛 1174 Problem F 我是好人4 容斥

    Problem F: 我是好人4 Description 众所周知,我是好人!所以不会出太难的题,题意很简单 给你n个数,问你1000000000(含1e9)以内有多少个正整数不是这n个数任意一个的倍 ...

  3. Swift String转Character数组

    通过String的characters方法,将String转Character数组 例如: let characters:Array<Character> = Array("01 ...

  4. 随机森林算法demo python spark

    关键参数 最重要的,常常需要调试以提高算法效果的有两个参数:numTrees,maxDepth. numTrees(决策树的个数):增加决策树的个数会降低预测结果的方差,这样在测试时会有更高的accu ...

  5. 使用dbms_metadata.get_ddl遇到ORA-31603

    建了一个外部表,想看看这个表的信息,一查就报错了: SQL> select dbms_metadata.get_ddl('TABLE','ext_case1') from dual; ERROR ...

  6. Kylin基础教程(二)

    近期先把Kylin教程整理完毕,后续根据大家需求(可能会发起投票),整理其他技术栈知识教程. OK,那么接上一篇文章,感性认知了Kylin之后,我们先来看一下如何部署Kylin吧. 序号也依然沿用上一 ...

  7. 使用 async/ await 进行 异步 编程

    一.异步函数 异步函数概念. 通常 是 指用 async 修饰 符 声明 的, 可 包含 await 表达式 的 方法 或 匿名 函数 1. 从 语言 的 视角 来看, 这些 await 表达式 正是 ...

  8. Android 制作类似支付圆圈和打钩界面ProgressWheel

    首先要说明的是,制作圆圈旋转的效果并不是博主做的,是参照了github上的一个代码,只是在上面添加了修改,对其优化并增加了一个打钩的动画. 先来看下效果,1+的手机获取root权限真是难,没法录屏,只 ...

  9. java根据出生日期计算年龄

    /** * @author jerry.chen * @param brithday * @return * @throws ParseException * 根据生日获取年龄; */ public ...

  10. Javescript 面向对象编程 — 封装

    生成实例对象的原始模式 <script type="text/javascript"> var Cat={ name:'波斯猫', color:'White' } al ...