TabSwitch-min.js使用标签切换

最新推荐文章于 2024-04-18 10:09:08 发布

wangqiuchen_Study

最新推荐文章于 2024-04-18 10:09:08 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：标签切换

本文链接：https://blog.youkuaiyun.com/wangqiuchen_Study/article/details/52668093

javascript 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的标签切换插件示例。该插件通过设置不同的类来控制显示和隐藏的内容块，实现了内容的动态切换效果。文章提供了具体的JavaScript配置参数和HTML结构示例。

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

引用js

<script src="http://js.jrjimg.cn/lib/ui/TabSwitch-min.js"></script>

js中

var tabParamzht = {
    menuPre: "menu_",//标签按钮id前缀
    conPre: "cont_",//容器id前缀
    total: 2,//标签总数
    onClass: "hover", eventType: "click"//选中标签的class
}

var tab = new JRJ.ui.TabSwitch(tabParamzht);

HTML中
<ul id="menu">
    <li id="menu_1" class="hover">
         发行中
    </li>
    <li id="menu_2" class="lastLi">
         即将发行
    </li>
</ul>
<div id="cont_1" class="lc-body" >
     
</div>
<div id="cont_2" class="lc-body" style="display: none;">
    </div>