html make_tabs

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html make_tabs相关的知识，希望对你有一定的参考价值。

/*
 * Copyright (C) JoseRobinson.com
 * https://gist.github.com/jrobinsonc/8020730
 */
function makeTabs(container) {
    var $ = jQuery,
        $container = $(container),
        $$anchors = $container.find("> ul > li > a"),
        $$tabs = $container.find("> div > div");

    $$anchors.on('click', function(evt) {
        evt.preventDefault();

        var $self = $(this),
            $parent = $self.parent("li");

        if ($parent.is(".current")) {
            return;
        }

        $$tabs.hide();
        $$anchors.closest("li.current").removeClass("current");
        $parent.addClass("current");
        $$tabs.filter($self.attr("href")).fadeIn();
    });

    $$anchors.eq(0).trigger("click");
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tabs</title>
</head>
<body>

    <div id="my-tabs">
        <ul>
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
        </ul>
        
        <div>
            <div id="tab1">Tab 1 content</div>
            
            <div id="tab2">Tab 2 content</div>
        </div>
    </div>
    
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="make-tabs.js"></script>
    <script>
        jQuery(document).ready(function($) {
            make_tabs("#my-tabs");
        });
    </script>
    
</body>
</html>

以上是关于html make_tabs的主要内容，如果未能解决你的问题，请参考以下文章

Html.Partial 与 Html.RenderPartial 和 Html.Action 与 Html.RenderAction

html Html模板/ Html Boilerplate |标签HTML