精华内容
下载资源
问答
  • js动态修改class属性

    千次阅读 2020-06-18 10:34:07
    js动态修改class属性 在前端界面,希望通过点击修改class属性,实现代码如下: $(function(){ $("#selected li").click(function() { $(this).siblings('li').removeClass('active'); // 删除其他li元素的样式 $...

    js动态修改class属性

    在前端界面,希望通过点击修改class属性,实现代码如下:

    $(function(){
        $("#selected li").click(function() {
            $(this).siblings('li').removeClass('active');  // 删除其他li元素的样式
            $(this).addClass('active');                            // 添加当前元素的样式
        });
    });

    html代码如下:

    <ul class="nav nav-sidebar" id = 'selected'>
        <li class ="active">
            <a href="${pageContext.request.contextPath}/describe/result">基本信息</a>
        </li>
        <li >
            <a   onclick="getDescribe()">成绩查询</a>
        </li>
        <li >
            <a href="${pageContext.request.contextPath}/describe/result">测试查询</a>
        </li>
        <li >
            <a data-toggle="modal" data-target="#passwordCorrect">修改密码</a>
        </li>
        <li >
                <a href="${pageContext.request.contextPath}/signin/signInSuccess" onclick="login()">退出登录</a>
        </li>
        <li >
            <a href="${pageContext.request.contextPath}/signin/signInSuccess" >退出登录</a>
        </li>
    </ul>
    展开全文
  • 动态修改class的名字

    千次阅读 2019-04-25 15:51:08
    jquery可以使用attr()或prop()方法修改类名,javascript可以修改对象的className属性,关键代码如下: $("#test").attr(“class”,“blue”); $("#test").prop(“class”,“blue”); document.getElementById(“test...

    jquery可以使用attr()或prop()方法修改类名,javascript可以修改对象的className属性,

    $("#test").attr(“class”,“blue”);
    $("#test").prop(“class”,“blue”);
    document.getElementById(“test”).className = “blue”;

    展开全文
  • vue 使用v-for 动态修改class

    千次阅读 2019-03-14 17:53:05
    通过v-for指令,按照index动态生成class 例如: .item-1 .item-2 .item-3 .item-4 .item-5 其中,1,2,3,4,5为循环遍历的下标。 源码实现 &amp;lt;template&amp;gt; &amp;lt;div class=&quot;game&...

    问题描述

    通过v-for指令,按照index动态生成class

    例如: .item-1 .item-2 .item-3 .item-4 .item-5 其中,1,2,3,4,5为循环遍历的下标。

    实现原理

    通过methodsindex传入,并自定义返回值类型。

    注意: 此处无法使用computed实现!!!

    原因是computed是无法获取到当前遍历的index值,可以自己动手试一试。

    源码实现

    <template>
      <div class="game">
        <div class="game_item" v-for="(item,index) in gameList" :class="generateClassName(index)" :key="index">
            {{item}}
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'game',
      data () {
        return {
          gameList: Array(40).fill(1)
        }
      },
      methods: {
        generateClassName (index) {
          // 调用方法,动态生成index
          return `game_item-${index}`
        }
      }
    }
    </script>
    
    
    展开全文
  • 实现的原理很简单,只需要动态绑定一个class就可以了,现在分别列出三种情况 1.点击文字颜色改变,再次点击,点击的颜色改变,之前的颜色变回原来的颜色 代码如下: <template> <div class="list2"> &...

    实现的原理很简单,只需要动态绑定一个class就可以了,现在分别列出三种情况

    1.点击文字颜色改变,再次点击,点击的颜色改变,之前的颜色变回原来的颜色

    代码如下:

    <template>
      <div class="list2">
        <ul>
          <li
            v-for="(item,index) in List"
            :key="index"
            :class="{activeColor:colorIndex===index}"
            @click="changeColor(item,index)"
          >
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: "list",
      components: {},
      data() {
        return {
          List: [
            { name: "总的" },
            { name: "部分1" },
            { name: "部分2" },
            { name: "部分3" }
          ],
          colorIndex: -1
        };
      },
      mounted() {},
      methods: {
        changeColor(item, index) {
          this.colorIndex = index;
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    .list2 {
      width: 100px;
      ul {
        list-style: none;
        .activeColor {
          background-color: #f6fbff;
          color: #298adb;
        }
        li {
          cursor: pointer;
        }
      }
    }
    </style>
    

    效果如下,当我点击其中某一个文字的时候,字体的颜色就改变了

    在这里插入图片描述

    2.如果需要点击多个变颜色的话,再次点击取消的话,我是这样做的,给data里面的对象添加一个属性,全部设置为false,然后点击的时候设置为true,代码如下:

    <template>
      <div class="list2">
        <ul>
          <li
            v-for="(item,index) in List"
            :key="index"
            :class="{activeColor:item.active}"
            @click="changeColor(item,index)"
          >
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: "list",
      components: {},
      data() {
        return {
          List: [
            { name: "总的" },
            { name: "部分1" },
            { name: "部分2" },
            { name: "部分3" }
          ],
          colorIndex: -1
        };
      },
      mounted() {
          this.addActive()
      },
      methods: {
          /*给List的每一个对象添加active属性,需要用到this.$set('对象','键值','value') */
          addActive(){
            this.List.forEach(item=>{
                this.$set(item,'active',false)
            })
          },
        changeColor(item, index) {
          if(!item.active){
             item.active = true
          } else {
              item.active = false
          }
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    .list2 {
      width: 100px;
      ul {
        list-style: none;
        .activeColor {
          background-color: #f6fbff;
          color: #298adb;
        }
        li {
          cursor: pointer;
        }
      }
    }
    </style>
    

    效果如下:点击多个文字可以改变样式,再次点击可以取消
    在这里插入图片描述
    3.有时候我们要是有个‘总的’,那个点击‘总的’,就不能有部分的存在了,点击部分就不能有‘总的’存在,代码如下:

    <template>
      <div class="list2">
        <ul>
          <li
            v-for="(item,index) in List"
            :key="index"
            :class="{activeColor:item.active}"
            @click="changeColor(item,index)"
          >
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: "list",
      components: {},
      data() {
        return {
          List: [
            { name: "总的" },
            { name: "部分1" },
            { name: "部分2" },
            { name: "部分3" }
          ],
          colorIndex: -1
        };
      },
      mounted() {
        this.addActive();
      },
      methods: {
        /*给List的每一个对象添加active属性,需要用到this.$set('对象','键值','value') */
        addActive() {
          this.List.forEach(item => {
            this.$set(item, "active", false);
          });
        },
        changeColor(item, index) {
          if (index === 0) {
            this.List.forEach(item => {
              item.active = false;
            });
          } else {
            this.List[0].active = false;
          }
          if (!item.active) {
            item.active = true;
          } else {
            item.active = false;
          }
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    .list2 {
      width: 100px;
      ul {
        list-style: none;
        .activeColor {
          background-color: #f6fbff;
          color: #298adb;
        }
        li {
          cursor: pointer;
        }
      }
    }
    </style>
    

    效果如下,点击‘总的’话,部分会全部不变,点击‘部分’,全部会不变
    在这里插入图片描述在这里插入图片描述

    展开全文
  • class语法: <view :class="{ active: isActive }">111</view> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view> <view class="static" ...
  • 动态修改实体class类注释中的值

    千次阅读 2016-11-17 12:11:01
    针对有时在开发中遇到需要修改注释中值得问题,可以调用此封装的类进行修改
  • 代理分两种技术,一种是jdk代理(机制就是反射,只对接口操作),一种就是字节码操作技术。...先看看jvm class技术: 字节码改写: (一)jdk 动态代理: 1.定义业务逻辑 public interface Service { //
  • Javascript简单动态修改多个class

    千次阅读 2018-03-16 11:51:43
    div class="aaa"&gt;11&lt;/div&gt; &lt;div class="aaa"&gt;11&lt;/div&gt; &lt;div class="aaa"&gt;11&lt;/div&gt; &lt;div ...
  • js 动态修改html div中class属性

    万次阅读 2019-04-15 14:34:53
    $(".msg-voice-animation").className是取不到属性值的 发现$(".msg-voice-animation") 是数组 所以用$(".msg-voice-...$(".msg-voice-animation")[0].className += ‘ msg-voice-animation-run’ 可以修改属...
  • 根据div的class属性动态修改div的id

    千次阅读 2018-06-30 13:51:42
    根据div的class属性动态修改div的id&lt;div class="cwfxDate" &gt;&lt;/div&gt;$(".cwfxDate").attr('id','newId');
  • JS修改class属性

    万次阅读 2019-05-13 00:43:11
    DOM里的每个节点上都有一个classList对象,既可以用里面的方法新增、删除、修改节点上的CSS类。也可以用它来判断某个节点是否被赋予了某个CSS类。 add(类名) 添加类名 remove(类名) 删除类名 replace(替换谁,替换...
  • 【H5】标签class类名属性的动态修改方法: box.classList.add(“className”); //添加类名 box.classList.remove(“className”); //删除属性 box.classList.toggle(‘className’); //转换属性:class类名有...
  • javaassist对class的字节码的动态修改

    万次阅读 2020-05-30 12:16:37
    javaassist的maven依赖: <dependency> <groupId>javassist</groupId> <artifactId>javassist</artifactId> <...public class Person { private String name;
  • jQuery修改class属性

    万次阅读 2018-08-25 10:37:32
    注意:对于元素来说,class属性可以有多个值.该方法不会移除已经存在的值,而是在原有的基础上追加一个或多个class属性. 2.removeClass(); 移除样式 3.hasClass() 包含某个样式 4.$(“#xxx”).attr(“class...
  • 修改标签的class属性值 直接在css中定义多种css类型 然后在事件中对DOM对象的class属性进行切换,是最简单可行的一种方式。也是目前使用最多的方法。此方法会覆盖对象原有的class属性 var obj = document....
  • java修改class文件指定内容

    万次阅读 2018-04-07 17:10:14
    在java 中可以直接修改class文件,而不用反编译,方法如下: import java.io.DataInput; import java.io.DataInputStream; import java.io.File; import java.io.FileInputStream; import java.io.IOException; ...
  • jclasslib修改class文件

    千次阅读 2018-02-26 17:16:15
    今天看到别人写的用工具jclasslib直接修改别人jar包里面的class文件,我自己也学着写了一下,发现果然很强大,但是也遇到一些坑public class JVMTest { public static void main(String[] args) { long maxMemory ...
  • 直接修改class文件

    千次阅读 2019-11-11 18:31:12
    通过jclasslib 和jd-gui两个软件 实现直接编辑class文件。具体参考原作者博客地址。
  • //修改后的class Class<?> c = ctClass.toClass(); excelBean = (ExcelBean) c.newInstance(); ctClass.detach(); return excelBean; } pool.insertClassPath("com.camb.common.web.bean.ExcelBean");这...
  • vue.js动态绑定class属性

    万次阅读 2018-05-30 15:50:18
    以下介绍几种在vuejs中,动态绑定class的方法: 1.使用 class = "{{ className }}" 的方式绑定吧class,此时className是固定的字符串,:class不可一起使用 2.使用 :class = "classA" 的方式...
  • CLASS直接修改工具

    热门讨论 2014-06-07 15:35:55
    CLASS文件直接修改工具,相当好用,大家可以试试哟!
  • 首先说明下背景: JS动态添加删除
  • java项目找不到源代码了,但有部署后的class文件。现在只需要简单修改一个数字,如下面的代码: if(a.equals("13")) { System.out.println("xxxxxxx"); } 现在只需要把13改成14,我试了反编译再修改再编译,但是跑不...
  • 小程序动态添加class样式

    万次阅读 2018-07-18 17:22:17
    如下图:动态为其绑定isrotate这个class。 上面代码的逻辑就是: 1、使用编写好isrotate这个class的样式; 2、判断item_rank.isShow是否为true,为true则添加isrotate,否则就不管啦;     第一次写博客,...
  • Vue 动态赋值 class

    千次阅读 2018-09-14 08:48:36
    版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82696881 Vue 动态赋值 class ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,360,113
精华内容 944,045
关键字:

动态修改class