利用JQuery插件CleverTabs实现多页签打开效果

最新推荐文章于 2025-06-19 09:27:46 发布

机械键盘侠

最新推荐文章于 2025-06-19 09:27:46 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端插件

本文链接：https://blog.youkuaiyun.com/xuchen_wang/article/details/94389643

本文介绍了如何利用JQuery插件CleverTabs在ASP.NET MVC项目中实现多页签功能。在布局页中，通过HTML和JS代码，点击不同的链接可以在同一页面中打开新的页签，提供了详细的CleverTabs API说明，包括添加、获取、关闭和刷新Tab的方法。

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

在VS中，我们能打开多页签，并在不同的页签之间进行浏览和操作，这一功能通过JQuery插件CleverTabs也能实现此效果。CleverTabs下载请点击这里：JQuery CleverTabs

本文采用ASP.NET MVC技术实现效果：要在布局页中点击不同的选择栏，根据不同的选择栏打开不同的网页链接而新增不同页签效果。首先新建一个空的MVC项目，并在_Layout布局页中引入JS和CSS文件，如下图所示：

<script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery.js"></script>//JS文件是必须的
<link href="~/Scripts/CleverTabs/CleverTabs/context/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Scripts/CleverTabs/CleverTabs/context/themes/base/style.css" rel="stylesheet" />
<script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery-ui.js"></script>
<script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery.cleverTabs.js"></script>
<script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery.contextMenu.js"></script>

页面的HTML代码如下图所示：

  <div class="container-fluid">
        <div class="panel panel-primary">
            <div class="panel-body col-md-2" style="margin-top:50px;margin-left:50px">
                <div class="list-group">
                    <a class="list-group-item" style="cursor:pointer" onclick="clickone()">
                            <h4 class="list-group-item-heading">应用二</h4>
                            <p class="list-group-item-text">应用二描述</p>
                        </a>
                        <a class="list-group-item disabled">
                            <h4 class="list-group-item-heading">应用三(失效)</h4>
                            <p class="list-group-item-text">应用三描述</p>
                        </a>
                        <a class="list-group-item" style="cursor:pointer" onclick="clicktwo()">
                            <h4 class="list-group-item-heading">应用四</h4>
                            <p class="list-group-item-text">应用四描述</p>
                        </a>
                        <a class