4条回答 默认 最新
- Go 旅城通票 2015-07-28 02:13关注
你这个单css搞不了,要结合js
<!doctype html> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script> <style> ul,li{list-style:none;padding:0px;margin:0px} ul.cloud{zoom:1;overflow:hidden;width:300px} ul.cloud li{-moz-border-radius:6px;-webkit-border-radius:6px;background:#fff;border:solid 1px purple;color:purple;padding:5px;margin-bottom:15px;border-radius:6px;-khtml-border-radius:6px;float:left;margin:0 5px 5px 0;line-height:30px;font-size:14px;cursor:pointer} ul.cloud li:hover,ul.cloud li.Selected{background:purple;color:#fff} ul.cloud li.green{color:green;border-color:green} ul.cloud li.green:hover,ul.cloud li.greenSelected{background:green;color:#fff} ul.cloud li.blue{color:blue;border-color:blue} ul.cloud li.blue:hover,ul.cloud li.blueSelected{background:blue;color:#fff} /*更加多颜色和样式类,注意样式名称规律*/ </style> <ul class="cloud" id="ul"> <li>标签1</li> <li class="green">标签2</li> <li class="blue">标签3</li> <li>标签4</li> <li>标签5</li> <li class="green">标签6</li> </ul> <input type="button" value="获取选择标签内容" onclick="getTags()"/> <script> $('#ul li') .attr('cls', function () { return this.className }) .click(function () { var cls = this.getAttribute('cls'), isSelected = this.className.indexOf('Selected') != -1; this.className = isSelected ? cls : cls + ' ' + cls+'Selected'; }); function getTags() { var tags = $('#ul li[class*="Selected"]').map(function () { return this.innerHTML }).get().join(','); alert(tags) } </script>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 使用C#,asp.net读取Excel文件并保存到Oracle数据库
- ¥15 C# datagridview 单元格显示进度及值
- ¥15 thinkphp6配合social login单点登录问题
- ¥15 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场 部分对应不上
- ¥15 如何在scanpy上做差异基因和通路富集?
- ¥20 关于#硬件工程#的问题,请各位专家解答!
- ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
- ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
- ¥30 虚心请教几个问题,小生先有礼了
- ¥30 截图中的mathematics程序转换成matlab