1.我们设置一个div,我们直接用css里面行内样式来设置div的样式,用style设置左外边距和上外边距然后背景色
2.然后在div里面设置一个select标签,,写一个select标签里面再写5个option标签然后里面添加文字。multiple(设置多选)并且用css的行内样式设置select的宽高和浮动,再设置id名。
3.然后再设置一个div,用style设置宽和左浮动,然后给div里面设置4个input按钮标签,并且行内样式设置按钮的宽和id名
4.再一个select标签,然后multiple(设置多选)style设置左浮动和宽高还有id名。
5.写出来的静态页面就搭建好了。
6.导入jQuery的插件
7.我们要做的是点击第一个按钮左边的文字移入到右边框里面,现在写一个页面加载事件然后找到第一个按钮的id然后设置点击事件。
8.设置好点击事件后,然后找到左边框的id名和下面的option的标签然后一个冒号写一个过滤选择器selected.appendTo($(“#se2”)),第一个按钮完成了,首先点击选中文字,再点击第一个按钮文字就会移入到右边的边框。
9.现在写第二个按钮,跟第一个是一样的,点击第二个按钮右边的文字移入到左边框里面,现在写一个页面加载事件然后找到第二个按钮的id然后设置点击事件。设置好点击事件后,然后找到右边框的id名和下面的option的标签然后写一个过滤选择器selected.appendTo($(“#se1”)),第二个按钮完成了,首先点击选中文字,先第一个按钮文字就会移入到右边的边框,再点击第二个按钮文字就会移入到左边的边框。
10.第三个按钮我们就不用写过滤选择器了直接找到左边框的id名和下面的option的标签然后. appendTo($(“#se2”)),第三个按钮完成了,我们直接点击第三个按钮左边的文字会全部移入到右边的框里。
11.第四个按钮跟第三个是一样的也不用写过滤选择器了直接找到右边框的id名和下面的option的标签然后. appendTo($(“#se1”)),第四个按钮完成了,然后直接点击第四个按钮右边的文字会全部移入到左边的框里。案例完成。
这是我所学到的引用步骤,所以我要分享给你们,希望可以帮助到你们。以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔