修改LigerUI的导航栏，改为Tab标签模式-创新互联

修改LigerUI的导航栏，改为Tab标签模式

长白网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作，到程序开发，运营维护。成都创新互联从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

LigerUI导航栏本身是没有tab标签模式的，但是实际上，很多时候标签能能更好的展示业务，将导航的内容按照类目进行划分，避免一个里面太多的情况。

下面是我改造后的效果图，如下：

修改LigerUI的导航栏，改为Tab标签模式

ligerui是一个不错的免费开源ui框架，功能还是很强大的，但是有些地方也做的不够好，比如表单的自适应布局，树，布局等等，但是相信会越来越好。这里给出我改造后代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>导航</title>
    <link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css"/>
    <script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/plugins/ligerTab.js" type="text/javascript"></script>
    <script src="../lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#layout").ligerLayout({topHeight: 40, leftWidth: 200});
            var ttt = "<div id=\"tab\" style=\"width: 160px\">\n" +
                    "    <div title=\"业务\"></div>\n" +
                    "    <div title=\"配置\"></div>\n" +
                    "</div>";
            $(".l-layout-header-inner").html(ttt);
            $("#tab").ligerTab();
        })
    </script>
</head>
<body>
<div id="layout">
    <div position="top"></div>
    <div position="left"></div>
    <div position="center"></div>
    <div position="bottom"></div>
</div>
</body>
</html>

欢迎交流！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前题目：修改LigerUI的导航栏，改为Tab标签模式-创新互联
本文路径：https://www.cdcxhl.com/article16/deshgg.html

成都网站建设公司_创新互联，为您提供域名注册、做网站、定制开发、网站改版、手机网站建设、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容