前端小组件-CSDN博客

博客介绍了前端的多项交互效果，包括多项选择框、多面板切换、背景与导航栏或标签栏设计，以及星星评分。重点阐述了星星评分的一种实现方法，即通过图片，利用li添加light类名改变背景位置，将空心星变为实心星。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.多项选择框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vue多项选择框(原创)-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.panel-height ul {
	overflow:hidden;
}
.panel-height ul li {
	width:75px;
	height:25px;
	line-height:25px;
	text-align:center;
	float:left;
	background-color:rgb(56,145,94);
	color:#fff;
	margin-left:10px;
	list-style-type:none;
	border:1px solid  rgb(67,122,91);
}
.del {
	padding-left:10px;
}
.selectde {
	border:1px solid #be0000 !important;
	color:#be0000 !important;
}
</style>
</head>
<body>
<script src="https://www.jq22.com/jquery/vue.min.js"></script><script src="https://s1.pstatp.com/cdn/expire-1-M/vue/2.2.2/vue.min.js"></script>
<div id="app">
    <div class="container">
        <div class="row">
            
            <div class="col-xs-6 clo-sm-6">
                <div class="panel panel-success">
                    
                    <div class="panel-heading">
                        <h3 class="panel-title">省份({{adress.length}} / 当前选中({{newAdress.length}})</h3>
                    </div>
                    
                    <div class="panel-body panel-height">
                        <ul>
                            <li :class="v.flag? 'selectde':''" v-for="(v,i) in adress" :key="i" @click="add(v)">{{v.name}}</li>
                        </ul>
                    </div>
                </div>

            </div>
            
            <div class="col-xs-6 col-sm-6">
                <div class="panel panel-success">
                    
                    <div class="panel-heading">
                        <h3 class="panel-title">已选中省份({{newAdress.length}})</h3>
                    </div>
                    <div class="panel-body panel-height">
                        <ul>
                            <li v-for="(v,i) in newAdress" :key="i" @mouseover="flag = i" @mouseout="flag='hide'">{{v.name}}
                                <span class="del" @click="del(v,i)" v-show="flag==i">x</span></li>


                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
window.onload = function() {
    new Vue({
        el: "#app",
        data: {
            adress: [{
                    name: "北京市",
                    flag: false,
                    id: 0
                },
                {
                    name: "上海市",
                    flag: false,
                    id: 1
                },
                {
                    name: "重庆市",
                    flag: false,
                    id: 2
                },
                {
                    name: "天津市",
                    flag: false,
                    id: 3
                },
                {
                    name: "湖北省",
                    flag: false,
                    id: 4
                },
                {
                    name: "四川省",
                    flag: false,
                    id: 5
                },
            ],
            newAdress: [],
            flag: 'hide', //关闭隐藏
        },
        methods: {
            add(v) {
                v.flag = true; //高亮状态
                //es5   去重
                // for(var i = 0;i<this.newAdress.length;i++){
                //     if(v.id == this.newAdress[i].id){
                //         return;
                //     }
                // }
                //es7
                //this.newAdress = [...new Set(this.newAdress)]  es7 去重
                // filter 去重
                var id = this.newAdress.filter(function(i) {
                    return i.id == v.id;
                })
                if (id.length > 0) return;
                this.newAdress.push(v);

            },
            del(v, i) {
                this.newAdress.splice(i, 1);
                this.adress.forEach(element => {
                    if (element.id == v.id) {
                        v.flag = false;
                    }
                });

            }
        },
        mounted: function() {

        }
    })
}
</script>

</body>
</html>

2.多面板切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tab切换效果(原创)-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
ol,ul,li {
	list-style:none;
}
.nav {
	height:40px;
	line-height:40px;
}
.nav li {
	float:left;
	width:20%;
}
.nav li a {
	display:block;
	text-align:center;
	cursor:pointer;
}
.nav li a:hover {
	background-color:red;
}
.panel {
	margin:0 auto;
	background-color:#CCCCCC;
	height:400px;
	text-align:center;
	font-size:30px;
}
.nav_btn_active {
	background-color:red;
}
</style>
</head>
<body>
<div style="width: 70%;margin:0 auto;height: 400px;">
    <ul class="nav">
        <li><a ref="menu_a" onclick="topNav(this)" class="nav_btn_active">菜单1</a></li>
        <li><a ref="menu_b" onclick="topNav(this)">菜单2</a></li>
        <li><a ref="menu_c" onclick="topNav(this)">菜单3</a></li>
        <li><a ref="menu_d" onclick="topNav(this)">菜单4</a></li>
        <li><a ref="menu_e" onclick="topNav(this)">菜单4</a></li>
    </ul>
    <div id="menu_a" class="panel">
        面板1
    </div>
    <div id="menu_b" class="panel">
        面板2
    </div>
    <div id="menu_c" class="panel">
        面板3
    </div>
    <div id="menu_d" class="panel">
        面板4
    </div>
    <div id="menu_e" class="panel">
        面板5
    </div>
</div>

<script>
$(document).ready(function() {
    $(".panel").hide();
    $("#menu_a").show();
});

function topNav(o) {
    $(".panel").hide();
    var ref = $(o).attr('ref');
    $("#" + ref).show();
    $(o).parent().parent().find("li a").removeClass('nav_btn_active');
    $(o).addClass('nav_btn_active');
}
</script>

</body>
</html>

3.好的背景和导航栏获标签栏

G:\HbuilderSpace\好的模板素材\好的导航

4、星星评分

https://www.jb51.net/article/86255.htm

一、方法1

1、用到图片

2、结构和样式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 ul {
  padding-left: 0;
  overflow: hidden;
 }
 ul li {
  float: left;
  list-style: none;
  width: 27px;
  height: 27px;
  background: url(img/star.gif)
 }
 ul li a {
  display: block;
  width: 100%;
  padding-top: 27px;
  overflow: hidden;
 }
 ul li.light {
  background-position: 0 -29px;
 }
 </style>
</head>
<body>
 <ul>
  <li class="light"><a href="javascript:;">1</a></li>
  <li><a href="javascript:;">2</a></li>
  <li><a href="javascript:;">3</a></li>
  <li><a href="javascript:;">4</a></li>
  <li><a href="javascript:;">5</a></li>
 </ul>
</body>
</html>