Получение селектора над вкладками для изменения размера и перемещения по мере необходимости?

ProgramBox

Получение селектора над вкладками для изменения размера и перемещения по мере необходимости?

Post author:admin
Запись опубликована:16 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть этот код, как показано ниже, который дает мне несколько вкладок. У меня проблема с селектором, когда, если вы нажмете на нижнюю строку, селектор не переместится вниз.

Также, если изменить его больше, селектор становится еще хуже. Есть ли способ заставить селектор работать должным образом таким образом, чтобы он заполнял контейнер-оболочку или просто соответствовал тексту?

 <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="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>
        <a href="javascript:void(0)" data-id="4"><i class="fab fa-superpowers"></i>Black Panther</a>
        <a href="javascript:void(0)" data-id="4"><i class="fab fa-superpowers"></i>Black Panther</a>
        <a href="javascript:void(0)" data-id="4"><i class="fab fa-superpowers"></i>Black Panther</a>
        <a href="javascript:void(0)" data-id="4"><i class="fab fa-superpowers"></i>Black Panther</a>
        <a href="javascript:void(0)" data-id="4"><i class="fab fa-superpowers"></i>Black Panther</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();
    var activeHeight = activeItem.innerHeight();

    $(".selector").css({
        "left": activeItem.position.left   "px",
        "right": activeItem.position.right   "px",
        "width": activeWidth   "px",
        "height": activeHeight   "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>

Ответ №1:

Вместо того, чтобы использовать div «selector», не могли бы вы просто применить стиль к активному тегу «a»?

Редактировать

Хорошо, я понимаю, что вы пытаетесь сделать в отношении селектора, анимирующего выбранный элемент.

Добавьте «справа» и «снизу» в CSS .selector следующим образом:

 .tabs .selector {
    height: 100%;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 0px;
    right:0px;
    bottom: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").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",
             "top": itemPos.top   "px",
            "width": activeWidth   "px"
        });

Редактировать 2

Чтобы установить для всех элементов одинаковую ширину, вы могли бы использовать:

   var maxWidth = 0;
var $element;
$(".tabs a").each(function(){
   $element = $(this);
   if($element.width() > maxWidth){
     maxWidth = $element.width();
   }

});

  $(".tabs a").each(function(){
   $(this).width(maxWidth);

});

Правка 3

Это пример кода, обсуждаемого в комментариях:

 <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="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>
        <a href="javascript:void(0)" data-id="5"><i class="fab fa-superpowers"></i>Black Panther</a>
        <a href="javascript:void(0)" data-id="6"><i class="fab fa-superpowers"></i>Black Panther</a>
        <a href="javascript:void(0)" data-id="7"><i class="fab fa-superpowers"></i>Black Panther</a>
        <a href="javascript:void(0)" data-id="8"><i class="fab fa-superpowers"></i>Black Panther</a>
        <a href="javascript:void(0)" data-id="9"><i class="fab fa-superpowers"></i>Black Panther</a>
        <a href="javascript:void(0)" data-id="10"><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>

var maxWidth = 0;
var $element;
$(".tabs a").each(function(){
   $element = $(this);
   if($element.width() > maxWidth){
     maxWidth = $element.width();
   }
});

$(window).on('resize', function(){
            $(".selector").hide();
      var activeItem = $(".tabs a[class*='active']");
      var id = activeItem.data("id");
      setSelectorPosition(id);
});

$(".tabs a").each(function(){
   $(this).width(maxWidth);

});

  // Set first active link
  setSelectorPosition(1);



    $(".tabs").on("click", "a", function (e) {
        e.preventDefault();
        $('.tabs a').removeClass("active");
        $(this).addClass('active');

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

        // Set selector position
        setSelectorPosition(id);

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

        // Show current tab
        $('#content'   id).show();
    });

    function setSelectorPosition(id) {          
            var activeItem = $(".tabs").find("[data-id='"   id   "']"); 
        var activeWidth = activeItem.innerWidth();
        var itemPos = activeItem.position();
        $(".selector").css({
            "left": itemPos.left   "px",
             "top": itemPos.top   "px",
            "width": activeItem.innerWidth()   "px",
            "height": activeItem.innerHeight()   "px"
        });
        $(".selector").show();
    }

</script>

<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;
        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 {
        display:none;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        right:0px;
        bottom: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>

1. Я, вероятно, мог бы. Я просто не очень разбираюсь в CSS / JS / HTML, поэтому я действительно не знаю, что я делаю.

2. Это действительно работает, но у меня возникли еще 2 проблемы с этим. Когда я раскомментирую выравнивание текста в оболочке, он перестает работать корректно. И это не очень хорошо выглядит при переключении через другие элементы (во-первых, это выходит за пределы оболочки, но также в целом это выглядит неприятно. Есть ли способ, возможно, изменить размер текста на основе самого длинного текста? и, может быть, центрировать его? Это сделало бы его немного более приятным?

3. Я добавил пример для придания всем элементам одинаковой ширины.

4. Возможно, вы также захотите добавить $ (window).on(‘resize’, function(){ ** Установите положение селектора здесь ** }); так что при изменении размера окна браузера положение селектора устанавливается правильно.

5. Да, кажется, что селектор размещен неправильно, если я меняю оболочку на .wrapper { text-align: center;margin: 50px auto; }

Вопрос:

Ответ №1:

Комментарии:

Вам также может понравиться

Причины утечки пула соединений

Угловая реактивная форма, не отображаемая на экране

Сокращение текстовых меток в ggalluvial plot