前端问题 点击侧边导航栏动态生成tab页

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>左侧点击后右侧添加tab标签栏以及内容</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style>
        body {
            font-family: Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif;
            font-size: 13px;
            margin: 0px auto;
        }

        #tabs {
            margin: 0;
            padding: 0;
            list-style: none;
            overflow: hidden;
        }

        #tabs li {
            float: left;
            display: block;
            padding: 5px;
            background-color: #bbb;
            margin-right: 5px;
        }

        #tabs li a {
            color: #fff;
            text-decoration: none;
        }

        #tabs li.current {
            background-color: #e1e1e1;
        }

        #tabs li.current a {
            color: #000;
            text-decoration: none;
        }

        #tabs li a.remove {
            color: #f00;
            margin-left: 10px;
        }

        #content {
            background-color: #e1e1e1;
        }

        #content p {
            margin: 0;
            padding: 20px 20px 100px 20px;
        }

        #main {
            width: 900px;
            margin: 0px auto;
            overflow: hidden;
            background-color: #F6F6F6;
            margin-top: 20px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            padding: 30px;
        }

        #wrapper,
        #doclist {
            float: left;
            margin: 0 20px 0 0;
        }

        #doclist {
            width: 150px;
            border-right: solid 1px #dcdcdc;
        }

        #doclist ul {
            margin: 0;
            list-style: none;
        }

        #doclist li {
            margin: 10px 0;
            padding: 0;
        }

        #container {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            width: 700px;
            margin-top: 20px;
        }

        css代码
    </style>
</head>

<body>
<div id="main">
    <div id="doclist">
        <h2>栏目列表</h2>
        <ul id="container">
            <li>
                <a href="#" rel="焦点图" title="jquery幻灯片,焦点图,banner特效,Flash焦点图_懒人之家">焦点图</a>
            </li>
            <li>
                <a href="#" rel="菜单导航" title="导航菜单,菜单导航,nav标签,导航代码,二级下拉菜单,横向导航,网页菜单,网页导航">菜单导航</a>
            </li>
            <li>
                <a href="#" rel="jquery特效" title="jquery特效,jquery插件库,jquery代码,收集最全的jquery插件特效">jquery特效</a>
            </li>
            <li>
                <a href="#" rel="tab标签" title="tab标签,tab选项卡,多页签代码,选项卡代码">tab标签</a>
            </li>
            <li>
                <a href="#" rel="在线客服" title="QQ在线客服代码,在线客服QQ,在线客服qq代码,右侧漂浮客服">在线客服</a>
            </li>
        </ul>
    </div>
    <div id="wrapper">
        <ul id="tabs">
        </ul>
        <div id="content"></div>
    </div>
</div>
</body>

</html>
<script type="text/javascript">
    $(function () {
        $("#container a").click(function () {
            addTab($(this));
            console.log('ccc')
        });

        $('#tabs ').on('click', 'a.tab', function () {
// Get the tab name

            var contentname = $(this).attr("id") + "_content";

// hide all other tabs
            $("#content p").hide();
            $("#tabs li").removeClass("current");

// show current tab
            $("#" + contentname).show();
            $(this).parent().addClass("current");

        });

        $('#tabs').on('click', 'a.remove', function () {
// Get the tab name
            var tabid = $(this).parent().find(".tab").attr("id");

// remove tab and related content

            var contentname = tabid + "_content";
            $("#" + contentname).remove();
            $(this).parent().remove();

// if there is no current tab and if there are still tabs left, show the first one

            if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

// find the first tab

                var firsttab = $("#tabs li:first-child");
                firsttab.addClass("current");

// get its link name and show related content

                var firsttabid = $(firsttab).find("a.tab").attr("id");
                $("#" + firsttabid + "_content").show();

            }

        });

    });

    function addTab(link) {

        if ($("#" + $(link).attr("rel")).length != 0)

            return;

// hide other tabs
        $("#tabs li").removeClass("current");
        $("#content p").hide();

// add new tab and related content
        $("#tabs").append("
  • " + $(link).html() + "x
  • "
    ); $("#content").append("

    " + $(link).attr("title") + "

    "
    ); // set the newly added tab as current $("#" + $(link).attr("rel") + "_content").show(); } </script>

    你可能感兴趣的:(前端,javascript,html)