vuejs选中当前样式active

最新推荐文章于 2021-12-19 19:22:38 发布

longzhoufeng

最新推荐文章于 2021-12-19 19:22:38 发布

阅读量3.6k

点赞数

分类专栏： vuejs 文章标签： vue-js

本文链接：https://blog.csdn.net/longzhoufeng/article/details/71636667

版权

vuejs 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<template>
    <div>
        <table id="longzhoufeng" class="table table-striped table-bordered" width="100%" style="border: 0 solid #fff;margin-top: 10px;">
            <thead class="thead-bottom-line">
            <tr>
                <th class="sorting-title">名称1</th>
                <th class="sorting-title">名称2</th>
                <th class="sorting-title">名称3</th>
                <th class="sorting-title">名称4</th>
            </tr>
            </thead>
            <tbody>
            <tr @click="activeHover(index)" class="list-table-hover" v-for="(item,index) in items" >
                <th class="sorting-title">{{item.text}}</th>
                <th class="sorting-title">{{item.text}}</th>
                <th class="sorting-title">{{item.text}}</th>
                <th class="sorting-title">{{item.text}}</th>
            </tr>
            </tbody>
        </table>
    </div>
</template>

vue js代码

<script>
    export default {
        data:function() {
            return{
                items: [
                    { text: '巴士' },
                    { text: '快车' },
                    { text: '专车' },
                    { text: '顺风车' },
                    { text: '出租车' },
                    { text: '代驾' }
                ],
            }
        },
        methods:{
            activeHover:function(index){
                var arrLi=[];
                var aLi=$("table tbody tr")
                for(var i=0;i<aLi.length;i++){
                    arrLi.push(aLi[i])
                }
                for( var i=0; i<arrLi.length; i++ ){
                    if(arrLi[i] !=this){
                        $(arrLi[i]).removeClass("active")
                    }

                    if(!$(arrLi[i]).hasClass("active")){
                        $(arrLi[index]).addClass("active")
                    }else{
                        $(arrLi[i]).removeClass("active")
                    }
                }
            },
        }
    }
</script>

CSS代码

<style scoped>
    .abc{
        background-color: #2aabd2;
    }
    table>thead.thead-bottom-line{
        border-bottom: 1px solid #eeeeef;
        border-top: 1px solid #eeeeef;
        background-color: #fff;
    }
    table>thead>tr>th.sorting-title{
        height: 35px;
        line-height: 35px;
        border: 0px solid #000000;
        font-weight: bold
    }
    table>tbody>tr.list-table-hover{
        height: 30px;
        line-height: 30px;
        background-color: #fff !important;
        border-top: 0px solid #eeeeef;
        border-left: 0px solid #eeeeef;
        border-right: 0px solid #eeeeef;
        border-bottom: 1px solid #eeeeef;
    }
    table>tbody>tr:hover{
        background-color: rgba(130, 219, 201, .5)!important;
    }
    table>tbody>tr.list-table-hover:hover{
        height: 30px;
        line-height: 20px;
        background-color: rgba(130, 219, 201, .5)!important;
        border-top: 0px solid #eeeeef;
        border-left: 0px solid #eeeeef;
        border-right: 0px solid #eeeeef;
        border-bottom: 1px solid #eeeeef;
    }
    table>tbody>tr.list-table-hover.active{
        background-color: rgba(130, 219, 201, .5)!important;
    }
    table>tbody>tr>td.sorting_content{
        height: 30px;
        line-height: 20px;
        /*background-color: #fff;*/
        border-top: 0px solid #eeeeef;
        border-left: 0px solid #eeeeef;
        border-right: 0px solid #eeeeef;
        border-bottom: 1px solid #eeeeef;
    }
    table>tbody>tr>td.sorting_content:last-child{
        height: 30px;
        line-height: 30px;
        min-width: 120px;
        border-top: 0px solid #eeeeef;
        border-left: 0px solid #eeeeef;
        border-right: 0px solid #eeeeef;
        border-bottom: 1px solid #eeeeef;
    }
</style>