jquery双向列表对应切换

最新推荐文章于 2021-09-26 13:36:27 发布
最新推荐文章于 2021-09-26 13:36:27 发布
阅读量490 收藏
点赞数
分类专栏： 前端Jquery系列案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gujinapenggu5/article/details/81010468
版权



<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>双向列表对应切换</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div class="title_list">

<!--左侧成员列表-->
<div class="transform_left">
<div class="transform_title">管理员</div>
<div class="transform_left_content">
<div class="transform_left_list">
<p>
<span class="online">张三1</span>
</p>
<p>
<span class="online">张三2</span>
</p>
<p>
<span>张三3</span>
</p>
<p>
<span>张三4</span>
</p>
</div>
</div>
</div>

<!--中间的按钮切换-->
<div class="transform_content">
<img class="to_right" src="images/right.png"/>
<img class="to_left" src="images/left.png"/>
</div>

<!--右侧成员列表-->
<div class="transform_right">
<div class="transform_title">管理员</div>
<div class="transform_right_content">
<div class="transform_right_list">
<p>
<span class="online">李四1</span>
</p>
<p>
<span class="online">李四2</span>
</p>
<p>
<span>李四3</span>
</p>
<p>
<span>李四4</span>
</p>
</div>
</div>
</div>







</div>


</body>

</html>








css部门

*{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}


.title_list{
position: absolute;
width: 211px;
height: 311px;
top: 46px;
left: 5px;
border: 1px solid #1c6caa;
}
.transform_left{
position: absolute;
width: 93px;
height: 312px;
left: 0px;
border-right: 1px solid #1C6CAA;
}
.transform_title{
height: 30px;
text-align: center;
line-height: 30px;
border-bottom: 1px solid #1c6caa;
}
.online{
color: #fbc552;
}


.transform_left_content{
position: absolute;
width: 93px;
height: 276px;
overflow: auto;
}
.transform_left_list p{
text-align: center;
height: 30px;
line-height: 30px;
cursor: pointer;
}
.transform_left_list p.selected{
background: #6b6565;
}




/*中间部分*/
.transform_content{
position: absolute;
width: 20px;
height: 100px;
left: 97px;
top: 95px;
}
.transform_content img{
margin-top: 20px;
cursor: pointer;
}


/*右侧部分*/
.transform_right{
position: absolute;
width: 93px;
height: 312px;
right: 0px;
border-left: 1px solid #1C6CAA;
}
.transform_right_content{
position: absolute;
width: 93px;
height: 276px;
overflow: auto;
}
.transform_right_list p{
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.transform_right_list p.selected{
background: #6b6565;
}



js部门

$(function(){

//双列表切换
threeTableSwitch();








})


function threeTableSwitch(){
//左侧管理员脚步
$(".transform_left_list").delegate("p","click",function(){
var classname = this.className;
if(classname == "selected"){
this.className = "";
}else{
this.className = "selected";
}
})

//右侧普通成员脚步
$(".transform_right_list").delegate("p","click",function(){
var classname = this.className;
if(classname == "selected"){
this.className = "";
}else{
this.className = "selected";
}
})


//点击右侧的箭头
var left_check2 = [];
$(".to_right").click(function(){
$(".transform_left_list .selected").each(function(){
left_check2.push($(this).children("span").text());
$(this).remove();
var html ="";
$.each(left_check2, function(i,v) {
html+="<p><span>"+ v +"</span></p>";
});
$(".transform_right_list").append(html);
left_check2 = [];
})
})

//点击左侧的箭头
var left_check3 = [];
$(".to_left").click(function(){
$(".transform_right_list .selected").each(function(){
left_check3.push($(this).children("span").text());
$(this).remove();
var html ="";
$.each(left_check3, function(i,v) {
html+="<p><span>"+ v +"</span></p>";
});
$(".transform_left_list").append(html);
left_check3 = [];
})
})
}



























































































午夜玫瑰钻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery双向列表左右移动选择框代码
06-10
jQuery双向列表左右移动选择框代码，可单选或多选或全部移动选项，还可以分别获取左右两个选择框的列表选项值。
详解使用vue实现tab 切换操作
08-30
通过绑定的 change(index) 事件，每次都将 index 给了 selected，然后 Tab 就会切换到对应的标签。上面的代码里，我们是通过切换 div 的显示与隐藏来进行执行的。 思路二：使用 CurrentView 在上面的实现方式中，...
使用jquery切换列表
Min的博客
08-02 1161
使用jquery进行列表的切换 （1）为代码添加css样式 （2）从第八条开始隐藏，当用户点击“显示全部品牌”的时候会显示隐藏的品牌（除了最后一条),并且进行文本的切换，高亮特定品牌。 （3）当用户点击“显示部分品牌”的时候会隐藏显示的品牌（除了最后一条),并且进行文本的切换，去除高亮。 $(function(){ var items=$('ul li:gt(6):n
自己写的jQuery 左右选择框
e度空间
09-28 198
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt;META NAME="Generator" CONTENT="EditPl
jquery版列表切换功能
weixin_30664051的博客
01-10 118
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style type="text/css"> *{ margin: 0; padding: 0;} ul{ ...
jquery产品介绍列表切换
ICode联盟
09-26 79
下载地址jquery产品介绍列表切换，大块tab切换效果介绍产品或者项目。 dd:
jquery+Vue分页器
03-12
- **导航按钮**：包括“上一页”、“下一页”，用于在前后页面间切换。 - **跳转输入框**：允许用户直接输入页码进行跳转。 **2. 结合jQuery和Vue的实现** - **HTML结构**：使用Bootstrap的样式创建分页器的基本...
H5页面可下拉刷新的订单列表
08-02
5. **动态数据绑定**：为了实现订单种类的切换，需要采用数据绑定技术，如AngularJS或Vue.js的双向数据绑定。这样，只需更改后台数组，前端界面就能实时反映变化，无需手动刷新页面。 6. **API接口设计**：后端需要...
JQuery 图片滚动轮播示例代码
10-26
如果需要实现自动轮播或双向切换，可以添加额外的定时器和方向判断逻辑。同时，还可以添加触控支持，使轮播在手机和平板设备上也能正常使用。 总的来说，这个jQuery图片滚动轮播示例是一个基础的实现，展示了如何...
前端项目-jqueryui.zip
09-02
然后，通过简单的jQuery选择器和方法，就可以激活对应的组件功能。例如，创建一个对话框可以这样写： ```javascript $("#dialog").dialog({ autoOpen: false, // 默认关闭 width: 400, // 设置宽度 modal: true ...
jquery双列表框插件Bootstrap Dual Listbox
07-29
Bootstrap Dual列表是一个为响应Twitter优化的列表框插件。它可以用在所有的现代浏览器和触摸设备上
jQuery左右交换互选框代码.zip
08-04
jQuery左右列表选项框代码基于jquery.1.9.1.min.js制作，有获取左侧数据，获取右侧数据，禁用按钮，启用按钮等功能。其中包括将左边一个/全部项目移到右边，反之亦然，配合获取数据。
jQuery双列表左右互选
06-01
jQuery穿梭框左右列表添加删除代码，支持多选和全选，选中列表选项后点击左右箭头按钮控制列表选项左右转移。
jquery实现 左右 双向选择器 挺好用
08-19
今天刚弄好一个双向选择器，挺好用的。 分享于此 下载即可使用。
jquery双向选择器两侧
08-26
2侧菜单的数据方便实现，很实用的框架。
jQuery实现列表框双向选择操作
weixin_30670925的博客
01-29 438
对列表框的操作经常碰到过这样的应用：从左侧的列表框中选中要选的项添加到右侧列表框中，然后提交最终选择的项，对误操作而选中的项还可以执行移除操作。在很多系统中应用比如说求职网站的选择意向工作地区，QQ好友管理添加好友到组。 查看演示下载源码 本站在前面有文章介绍了jquery的一个插件multiselect2side的应用Multiselect：操作多选列表框，但是我在实际应用中遇到的...
jquery双向列表选择器DIV模拟版
weixin_34234823的博客
11-02 237
D:\&gt;_ 你好像很美味 一九九九年至今，本人写代码已经难以自拔。。。。。。 jquery双向列表选择器DIV模拟版 前段时间项目需要用到双向列表选择，想直接用select，结果发现某些样式不支持，只好用div模拟了以下，功能基本实现能用了，需要其他功能自己加上，譬如列表里展示多列数据等。 select版链接：http://www.cnblogs.com/tie123abc/p/...
jquery 操作listbox 左右相互选择
02-23 231
实现左右两个listbox的相互选择功能 代码如下: 1 function ListBox_Move(listfrom, listto) { 2 var size = $j("#" + listfrom + " option").size(); 3 var selsize = $j("#" + listfr...
html下拉列表jq切换内容,jquery实现网站列表切换效果的2种方法
weixin_42300317的博客
06-04 288
本文实例为大家分享了jquery实现网站列表切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下效果图：网站品牌列表切换效果*{margin: 0px;padding: 0px;}a{color: black;text-decoration: none;}a:hover{color: brown;}.box{width: 600px;min-height:200px ;border: 1px...
用jquery实现对应切换效果
最新发布
06-01
好的，我可以为你介绍一下如何利用 jQuery 实现对应切换效果。 首先，我们需要在 HTML 文件中添加对应的标签和内容，比如使用 `<ul>` 和 `<div>` 标签： ```html <ul> <li class="tab active">Tab 1</li> <li class="tab">Tab 2</li> <li class="tab">Tab 3</li> </ul> <div class="tab-content active">Content 1</div> <div class="tab-content">Content 2</div> <div class="tab-content">Content 3</div> ``` 其中，`<li>` 标签表示每个选项卡，`<div>` 标签表示对应的内容。注意，我们需要为第一个选项卡和对应的内容添加 `active` 类，表示默认显示。 然后，我们可以使用 jQuery 来实现对应切换效果。具体来说，我们需要为每个选项卡添加点击事件，当点击时，切换到对应的内容。 ```js $(document).ready(function() { // 获取所有选项卡和对应的内容 var tabs = $('.tab'); var contents = $('.tab-content'); // 为每个选项卡添加点击事件 tabs.click(function() { // 获取当前点击的选项卡的索引 var index = tabs.index(this); // 切换选项卡的 active 类 tabs.removeClass('active'); $(this).addClass('active'); // 切换对应的内容的 active 类 contents.removeClass('active'); contents.eq(index).addClass('active'); }); }); ``` 在上面的代码中，我们首先使用 `$('.tab')` 和 `$('.tab-content')` 获取所有的选项卡和对应的内容。然后，我们为每个选项卡添加 `click` 事件，当点击时，获取当前选项卡的索引，然后切换对应的内容的 `active` 类。 这样，我们就成功利用 jQuery 实现了对应切换效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值