the_dead 2015-07-30 05:26 采纳率: 100%
浏览 1447
已采纳

在此页面把标签形状设置成自己选择的图片形状

 <!doctype html>
<title>jquery多彩标签云选择效果</title>
<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>标签2</li>
<li>标签3</li>
<li>标签4</li>
<li>标签5</li>
<li>标签6</li>
</ul>
<input type="button" value="获取选择标签内容" onclick="getTags()"/>
<script>
    function rnd(min, max) {
        var tmp = min;
        if (max < min) { min = max; max = tmp; }
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    var arr = ['', 'blue', 'green'];
    $('#ul li')
        .attr('cls', function () { return this.className = arr[rnd(0, arr.length)]; })//随机分配样式
        .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>
  • 写回答

2条回答 默认 最新

  • Go 旅城通票 2015-07-30 08:29
    关注

    用图片定义，而不是设置背景色，其他样式照着改

         ul.cloud li.green{border-color:green;background:url(nohover.jpg) no-repeat}
    ul.cloud li.green:hover,ul.cloud li.greenSelected{color:#fff;background:url(hover.jpg) no-repeat}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog