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

在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>