隐藏,取消隐藏选项卡更改的内容

问题描述 投票:1回答:1

我有这个代码,可以生成可爱的标签。 JavaScript负责切换标签,但我很难在标签切换期间尝试隐藏/取消隐藏内容。

最好的方法是什么?如果可能的话我也想避免使用href。我注意到在其他一些标签实现中,当使用href时,标签不在页面的顶部(例如,有标识和其他一些东西),当你点击它们时,它会在顶部显示标签(如在徽标中将被隐藏,因此您需要向上滚动才能看到它们。当然,只有当页面上的内容足够大时才会发生这种情况。

对不起我的语言,但我不是CSS / JS / HTML的人,所以我很自信我正在混合一些东西。

enter image description here

<style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');
    @import url('https://use.fontawesome.com/releases/v5.0.13/css/all.css');

    body {
        font-family: 'Roboto', sans-serif;
    }

    .wrapper {
        text-align: center;
        margin: 50px auto;
    }

    .tabs {
        margin-top: 50px;
        font-size: 15px;
        padding: 0px;
        list-style: none;
        background: #fff;
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
        display: inline-block;
        border-radius: 50px;
        position: relative;
    }

    .tabs a {
        text-decoration: none;
        color: #777;
        text-transform: uppercase;
        padding: 10px 20px;
        display: inline-block;
        position: relative;
        z-index: 1;
        transition-duration: 0.6s;
    }

    .tabs a.active {
        color: #fff;
    }

    .tabs a i {
        margin-right: 5px;
    }

    .tabs .selector {
        height: 100%;
        display: inline-block;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        border-radius: 50px;
        transition-duration: 0.6s;
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        background: #05abe0;
        background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
        background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
        background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
    }


    .tabs-content {
        display: none;
    }

    .tabs-content.active {
        display: block;
    }
</style>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
    <nav class="tabs">
        <div class="selector"></div>
        <a href="#" class="active"><i class="fas fa-burn"></i>Avengers</a>
        <a href="#"><i class="fas fa-bomb"></i>Guardians of The Galaxy</a>
        <a href="#"><i class="fas fa-bolt"></i>Thor</a>
        <a href="#"><i class="fab fa-superpowers"></i>Black Panther</a>
    </nav>
</div>

<div class="tabs-content active" id="content1">
    <p>
        Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder
        bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
    </p>
    <p>
        Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs
        pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
</div>

<div class="tabs-content" id="content2">
    <p>
        Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken.
        Pork
        belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
        Pig
        swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham
        hock.
        Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop
        ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner
        rump
        frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.
    </p>
    <p>
        Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket
        beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef
        kevin
        tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket
        shoulder.
        Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
    </p>
</div>

<script type="text/javascript">
    var tabs = $('.tabs');
    var items = $('.tabs').find('a').length;
    var selector = $(".tabs").find(".selector");
    var activeItem = tabs.find('.active');
    var activeWidth = activeItem.innerWidth();
    $(".selector").css({
        "left": activeItem.position.left + "px",
        "width": activeWidth + "px"
    });

    $(".tabs").on("click", "a", function (e) {
        e.preventDefault();
        $('.tabs a').removeClass("active");
        $(this).addClass('active');
        var activeWidth = $(this).innerWidth();
        var itemPos = $(this).position();
        $(".selector").css({
            "left": itemPos.left + "px",
            "width": activeWidth + "px"
        });
    });
</script>
javascript jquery html css
1个回答
1
投票

您可以使用链接上的data-id尝试类似下面的内容,然后使用它来显示相关选项卡(我没有对此进行测试,因此您可能需要仔细检查语法):

<div class="wrapper">
<nav class="tabs">
    <div class="selector"></div>
    <a href="javascript:void(0)" class="active" data-id="1"><i class="fas fa-burn"></i>Avengers</a>
    <a href="javascript:void(0)" data-id="2"><i class="fas fa-bomb"></i>Guardians of The Galaxy</a>
    <a href="javascript:void(0)" data-id="3"><i class="fas fa-bolt"></i>Thor</a>
    <a href="javascript:void(0)" data-id="4"><i class="fab fa-superpowers"></i>Black Panther</a>
</nav>
</div>

<div class="tabs-content active" id="content1">
    <p>
        Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder
        bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
    </p>
    <p>
        Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs
        pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
</div>

<div class="tabs-content" id="content2">
    <p>
        Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken.
        Pork
        belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
        Pig
        swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham
        hock.
        Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop
        ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner
        rump
        frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.
    </p>
    <p>
        Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket
        beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef
        kevin
        tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket
        shoulder.
        Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
    </p>
</div>

<script type="text/javascript">
    var tabs = $('.tabs');
    var items = $('.tabs').find('a').length;
    var selector = $(".tabs").find(".selector");
    var activeItem = tabs.find('.active');
    var activeWidth = activeItem.innerWidth();
    $(".selector").css({
        "left": activeItem.position.left + "px",
        "width": activeWidth + "px"
    });

    $(".tabs").on("click", "a", function (e) {
        e.preventDefault();
        $('.tabs a').removeClass("active");
        $(this).addClass('active');
        var activeWidth = $(this).innerWidth();
        var itemPos = $(this).position();
        $(".selector").css({
            "left": itemPos.left + "px",
            "width": activeWidth + "px"
            });

// Hide all tabs
$('.tabs-content').hide();

// Get id of link clicked
        var id = $(this).data("id");

// Show current tab
$('#content' + id).show();
            });
        </script>

或者你可以尝试类似下面的插件,这是非常好的,因为它是响应并在较小的屏幕上转换为手风琴(不确定你是否需要这是移动友好):http://jellekralt.github.io/Responsive-Tabs/#tab-1

© www.soinside.com 2019 - 2024. All rights reserved.