JS实现初始化、动态点击切换激活样式

食用须知,不懂得把代码交给AI解释一下,明白流程就会用了,本文只有js与html,样式代码一概没有:

效果展示

在这里插入图片描述
在这里插入图片描述

1、点击显示的盒子代码

<div data-v-e1dd37c4="" class="news-container main-width-container clearfix">
    <div data-v-e1dd37c4="" class="title title-dszx"></div>
    <div data-v-e1dd37c4="" class="menu" style="height: 300px">
        <div data-v-e1dd37c4="" class="menu-item" id="jnqsnkjcxdswjtz" onclick="kemu('jnqsnkjcxdswjtz-km')">
        <a data-v-e1dd37c4="" aria-current="page" style="cursor: pointer" class="jnqsnkjcxdswjtz-km km">文件通知</a>
        </div>
        <div data-v-e1dd37c4="" class="menu-item" id="jnqsnkjcxdshdbd" onclick="kemu('jnqsnkjcxdshdbd-km')">
            <a data-v-e1dd37c4=""
               aria-current="page" style="cursor: pointer"
               class="jnqsnkjcxdshdbd-km km">活动报道</a>
        </div>
        <div data-v-e1dd37c4="" class="menu-item" id="jnqsnkjcxdsmdgs" onclick="kemu('jnqsnkjcxdsmdgs-km')">
            <a data-v-e1dd37c4=""
               aria-current="page" style="cursor: pointer"
               class="jnqsnkjcxdsmdgs-km km">名单公示</a>
        </div>
    </div>

2、JS代码

<script type="text/javascript">
        // 在页面加载完成时执行的函数
        var nameValue=null;
        var km = 'jnqsnkjcxdshdbd';
        $(document).ready(function() {
            $('.' + km +'-km').addClass('router-link-exact-active router-link-active')
            $('#jnqsnkjcxdswjtza').hide();
            $('#jnqsnkjcxdshdbda').show();
            $('#jnqsnkjcxdsmdgsa').hide();
            // 调用获取URL参数值的函数并传入参数名
            nameValue = getParameterByName('name');
            // 在控制台输出参数值,以便检查是否成功获取
            console.log("Name parameter value: " + nameValue);
        });

        // 自定义获取URL参数值的函数
        function getParameterByName(name) {
            name = name.replace(/[$  $]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(window.location.href);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }

        var s = 0;
        function kemu(id) {
            // 首先隐藏所有内容区域
            $('#jnqsnkjcxdswjtza').hide();
            $('#jnqsnkjcxdshdbda').hide();
            $('#jnqsnkjcxdsmdgsa').hide();
            // 然后根据被点击的分类ID显示对应的内容区域
            if (id == 'jnqsnkjcxdswjtz-km') {
                $('#jnqsnkjcxdswjtza').show();
            }
            else if (id == 'jnqsnkjcxdshdbd-km') {
                $('#jnqsnkjcxdshdbda').show();
            }
            else if (id == 'jnqsnkjcxdsmdgs-km') {
                $('#jnqsnkjcxdsmdgsa').show();
            }
            console.log(id)

            // 更新选中的分类按钮样式
            $('.km').removeClass('router-link-exact-active router-link-active');
            // 再给当前点击的按钮添加激活样式
            $('.' + id).addClass('router-link-exact-active router-link-active')
        }
    </script>

3、这里是根据上面的点击显示的内容,点击相应的盒子显示相应的内容,里面嵌套了FreeMarker的语法不用在意,理解代码的用法


    
    <div data-v-e1dd37c4="" class="news-list-container">
        <div data-v-3c5e8975="" data-v-926337c4="" id="jnqsnkjcxdswjtza" data-v-e1dd37c4=""
             class="list-container">
            <div data-v-34383868="" data-v-37098de5="" class="card-container">
                [@cms_content_page count='12' orderBy='4' typeId='1,2,3,4' channelId='255'
                channelOption='1'
                dateFormat='yyyy-MM-dd HH:mm:ss']
                <!--dateFormat='yyyy-MM-dd HH-mm']-->
                [#if tag_pagination.list?size > 0]
                [#list tag_pagination.list as a]
                <a data-v-8dd192b6=""
                   data-v-34383868="" href="${a.url}"
                   class="news-list-item" showdate="true" showview="true">

                    <div data-v-8dd192b6="" class="news-title" style="line-height: 1.5;text-align: left;font-size: 22px" style="text-align: left;font-size: 22px">
                        [@text_cut s=a.title len=25  append='...' /]
                    </div>
                    <div data-v-8dd192b6="" class="publish-date" style="line-height: 25px;bottom: 40px">
                        <span data-v-8dd192b6="">${a.date?string(dateFormat)}</span>
                    </div>
                </a>
                [/#list]
                [#else]
                <a data-v-8dd192b6=""
                   data-v-34383868="" href=""
                   class="news-list-item" showdate="true" showview="true">
                    <div data-v-8dd192b6="" class="news-title" style="line-height: 1.5;text-align: left;font-size: 22px" style="text-align: left;font-size: 22px">
                        文件通知暂无数据
                    </div>
                </a>
                [/#if]
            </div>

            <div data-v-37098de5="" class="pagination el-pagination is-background"
                 style="margin-right: 28%">
                <div style="">
                    <!--上下页-->
                    [@cms_pagination sysPage='1'/]
                </div>
                [/@cms_content_page]
            </div>
        </div>
        <div data-v-3c5e8975="" data-v-926337c4="" id="jnqsnkjcxdshdbda" style="display: none" data-v-e1dd37c4=""
             class="list-container">
            <div data-v-34383868="" data-v-37098de5="" class="card-container">
                [@cms_content_page count='12' orderBy='4' typeId='1,2,3,4' channelId='256'
                channelOption='1'
                dateFormat='yyyy-MM-dd HH:mm:ss']
                <!--dateFormat='yyyy-MM-dd HH-mm']-->
                [#if tag_pagination.list?size > 0]
                [#list tag_pagination.list as a]
                <a data-v-8dd192b6=""
                   data-v-34383868="" href="${a.url}"
                   class="news-list-item" showdate="true" showview="true">

                    <div data-v-8dd192b6="" class="news-title" style="line-height: 1.5;text-align: left;font-size: 22px" style="text-align: left;font-size: 22px">
                        [@text_cut s=a.title len=25  append='...' /]
                    </div>
                    <div data-v-8dd192b6="" class="publish-date" style="line-height: 25px;bottom: 40px">
                        <span data-v-8dd192b6="">${a.date?string(dateFormat)}</span>
                    </div>
                </a>
                [/#list]
                [#else]
                <a data-v-8dd192b6=""
                   data-v-34383868="" href=""
                   class="news-list-item" showdate="true" showview="true">
                    <div data-v-8dd192b6="" class="news-title" style="line-height: 1.5;text-align: left;font-size: 22px" style="text-align: left;font-size: 22px">
                        活动报道暂无数据
                    </div>
                </a>
                [/#if]
            </div>

            <div data-v-37098de5="" class="pagination el-pagination is-background"
                 style="margin-right: 28%">
                <div style="">
                    <!--上下页-->
                    [@cms_pagination sysPage='1'/]
                </div>
                [/@cms_content_page]
            </div>
        </div>
        <div data-v-3c5e8975="" data-v-926337c4="" id="jnqsnkjcxdsmdgsa" style="display: none" data-v-e1dd37c4=""
             class="list-container">
            <div data-v-34383868="" data-v-37098de5="" class="card-container">
                [@cms_content_page count='12' orderBy='4' typeId='1,2,3,4' channelId='257'
                channelOption='1'
                dateFormat='yyyy-MM-dd HH:mm:ss']
                <!--dateFormat='yyyy-MM-dd HH-mm']-->
                [#if tag_pagination.list?size > 0]
                [#list tag_pagination.list as a]
                <a data-v-8dd192b6=""
                   data-v-34383868="" href="${a.url}"
                   class="news-list-item" showdate="true" showview="true">

                    <div data-v-8dd192b6="" class="news-title" style="line-height: 1.5;text-align: left;font-size: 22px" style="text-align: left;font-size: 22px">
                        [@text_cut s=a.title len=25  append='...' /]
                    </div>
                    <div data-v-8dd192b6="" class="publish-date" style="line-height: 25px;bottom: 40px">
                        <span data-v-8dd192b6="">${a.date?string(dateFormat)}</span>
                    </div>
                </a>
                [/#list]
                [#else]
                <a data-v-8dd192b6=""
                   data-v-34383868="" href=""
                   class="news-list-item" showdate="true" showview="true">
                    <div data-v-8dd192b6="" class="news-title" style="line-height: 1.5;text-align: left;font-size: 22px" style="text-align: left;font-size: 22px">
                        名单公示暂无数据
                    </div>
                </a>
                [/#if]
            </div>

            <div data-v-37098de5="" class="pagination el-pagination is-background"
                 style="margin-right: 28%">
                <div style="">
                    <!--上下页-->
                    [@cms_pagination sysPage='1'/]
                </div>
                [/@cms_content_page]
            </div>
        </div>
    </div>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/611398.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JAVA获取application.yml配置文件的属性值

application.yml配置参数 方式一&#xff1a;使用Value方式(常用) 语法 Value("${配置文件中的key:默认值}") Value("${配置文件中的key}")方法1&#xff1a;使用的类文件中定义变量&#xff0c;直接使用变量 import org.springframework.beans.factory.an…

通义千问2.5中文能力地表最强

随着人工智能技术的不断进步&#xff0c;智能问答系统已成为人们日常生活中不可或缺的一部分。阿里巴巴集团作为全球领先的科技公司&#xff0c;一直致力于AI领域的研发和创新。最近&#xff0c;阿里巴巴发布了其最新的智能问答系统——通义千问2.5。 通义千问2.5在AI问答领域…

抖音新店怎么对接达人?对接达人秘籍流程分享,让你学会找达人

大家好&#xff0c;我是电商花花。 新手怎么对接达人带货&#xff1f;这是我们新手商家 要考虑的问题。 很多新手抱怨自己新店铺不出单&#xff0c;没有销量&#xff0c;对接达人又怕达人看不上&#xff0c;没有达人愿意帮我带货&#xff0c;在面临这样的情况下不知道该怎么办…

基于自我对弈框架的偏好优化算法SPPO

传统的从人类反馈中进行强化学习&#xff08;RLHF&#xff09;的方法仰赖如Bradley-Terry模型等参数模型,但这样的模型难以充分捕捉人类偏好中的非递移性和非理性。最新的研究进展显示,直接使用偏好机率可以更准确地反映人类偏好,从而实现更灵活、更精确的语言模型对齐。本文提…

会话劫持攻击就在我们身边,我们要如何防范

会话劫持攻击&#xff08;Session Hijacking&#xff09;是一种网络攻击方式&#xff0c;攻击者通过某种手段获取到用户的会话标识&#xff08;Session ID&#xff09;&#xff0c;然后使用这个会话标识冒充合法用户进行恶意操作。这种攻击方式允许攻击者以合法用户的身份访问受…

Go语言系统学习笔记(一):基础篇

1. 写在前面 公司的新业务开发需要用到go语言&#xff0c;虽然之前没接触过这门语言&#xff0c;但在大模型的帮助下&#xff0c;边看项目边写代码也能进行go的项目开发&#xff0c;不过&#xff0c;写了一段时间代码之后&#xff0c;总感觉对go语言本身&#xff0c;我的知识体…

Python尝试安装 pyaudio 时遇到的错误信息表示安装过程失败,原因是找不到 Python.h 头文件

环境&#xff1a; Python 3.8.10 WSL2 问题描述&#xff1a; 尝试安装 pyaudio 时遇到的错误信息表示安装过程失败&#xff0c;原因是找不到 Python.h 头文件 error: subprocess-exited-with-error Building wheel for pyaudio (pyproject.toml) did not run successfully…

【数据结构】手把手带你玩转线性表

前言&#xff1a; 哈喽大家好&#xff0c;我是野生的编程萌新&#xff0c;首先感谢大家的观看。数据结构的学习者大多有这样的想法&#xff1a;数据结构很重要&#xff0c;一定要学好&#xff0c;但数据结构比较抽象&#xff0c;有些算法理解起来很困难&#xff0c;学的很累。我…

Ubuntu 安装 samba 实现文件共享

1. samba的安装: sudo apt-get install samba sudo apt-get install smbfs2. 创建共享目录 mkdir /home/share sudo chmod -R 777 /home/share3. 创建Samba配置文件: 3.1 保存现有的配置文件 sudo cp /etc/samba/smb.conf /etc/samba/smb.conf.bak3.2 打开现有的文件 sudo…

基于小波交叉谱分析的地震波走时变化测量(MATLAB)

地震波在地球介质中传播&#xff0c;带来了丰富的地下介质物性的信息&#xff0c;为了解地球内部结构及运动变化提供了可能。地球内部地震波速度的差异是人们确定地球圈层结构和横向不均匀性的重要物理参数&#xff0c;地下介质应力的变化和积累是地震的孕育和发生的原因&#…

百面算法工程师 | 传统图像处理——OpenCV

本文给大家带来的百面算法工程师是传统图像处理的面试总结&#xff0c;文章内总结了常见的提问问题&#xff0c;旨在为广大学子模拟出更贴合实际的面试问答场景。在这篇文章中&#xff0c;我们将介绍一些集几何变换和图像平滑处理&#xff0c;并提供参考的回答及其理论基础&…

分布式与集群的区别

先说区别&#xff1a; 分布式是并联工作的&#xff0c;集群是串联工作的。 分布式中的每一个节点都可以做集群。而集群并不一定就是分布式的。 集群举例&#xff1a;比如新浪网&#xff0c;访问的人很多&#xff0c;他可以做一个集群&#xff0c;前面放一个相应的服务器&…

微软必应bing国内广告开户费用?如何开户投放?

当下搜索引擎广告无疑是企业触达潜在客户、提升品牌曝光度的重要途径之一&#xff0c;微软必应&#xff08;Bing&#xff09;作为全球第二大搜索引擎&#xff0c;尽管在国内市场份额上可能不敌某些本土巨头&#xff0c;但其独特的用户群体和国际影响力使其成为众多企业拓展市场…

【强化学习入门】基于DDPG的强化学习控制器设计

最近在看控制领域研究热门–强化学习相关的东西&#xff0c;跟着matlab官方强化学习教程一边看一边学&#xff0c;感觉入门门槛略高&#xff0c;需要补很多机器学习相关的知识&#xff0c;高数概率论那些&#xff0c;摸索了个把月感觉现在只大概会用&#xff0c;原理啥的还没搞…

git 常用命令 git怎么撤销命令 持续更新中!!!!

基本流程 # 拉取仓库 git clone 仓库地址 # 拉取最新版本 git pull # 本地提交 git add . git commit -m "本次提交信息&#xff01;" # 推送上云 git push分支 # 创建分支 git checkout -b cart # 删除本机的分支 git branch -d cart # 切换分支 本地切换到主分支…

热爱电子值得做的电子制作实验

加我zkhengyang&#xff0c;进嵌入式音频系统研究开发交流答疑群(课题组) AM/FM收音机散件制作&#xff0c;磁带随声听散件&#xff0c;黑白电视机散件制作&#xff0c;功放散件制作&#xff0c;闪光灯散件制作&#xff0c;声控灯散件&#xff0c;等等&#xff0c;可提高动手能…

postman常用功能超全使用教程

Postman 使用 一、Postman 简介 Postman是一个接口测试工具,在做接口测试的时候,Postman相当于一个客户端,它可以模拟用户发起的各类HTTP请求(如:get/post/delete/put…等等),将请求数据发送至服务端,获取对应的响应结果。 二、Postman 功能简介 三、Postman 下载安装 Post…

多模态模型Mini-Gemini:代码模型数据均开源,MiniCPM小钢炮2.0全家桶四连发,可以在Android 手机端上运行的大模型,效果还不错

多模态模型Mini-Gemini&#xff1a;代码模型数据均开源&#xff0c;MiniCPM小钢炮2.0全家桶四连发&#xff0c;可以在Android 手机端上运行的大模型&#xff0c;效果还不错。 多模态模型Mini-Gemini&#xff1a;代码模型数据均开源 香港中文大学终身教授贾佳亚团队提出多模态模…

如何将手写数学公式识别?识别工具在这里

如何将手写数学公式识别&#xff1f;在日常学习中&#xff0c;将手写数学公式识别出来可以极大地提高我们的学习效率。通过这一技术&#xff0c;我们能够快速、准确地将手写公式转化为可编辑的文本&#xff0c;省去了繁琐的输入过程。这不仅节约了时间&#xff0c;还减少了因输…

使用Python实现DataFrame中奇数列与偶数列的位置调换

目录 一、引言 二、背景知识 三、问题描述 四、解决方案 五、案例分析与代码实现 六、技术细节与注意事项 七、扩展与应用 八、封装为函数 九、错误处理与健壮性 十、性能优化 十一、总结与展望 一、引言 在数据处理和分析中&#xff0c;数据框&#xff08;DataFra…