Javascript 将选择器置于选项卡上以根据需要调整大小和移动？_Javascript_Jquery_Html_Css

Javascript 将选择器置于选项卡上以根据需要调整大小和移动？

javascript jquery html css

Javascript 将选择器置于选项卡上以根据需要调整大小和移动？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我的代码如下，这给了我一些标签。我有一个选择器的问题，如果你点击底线选择器将不会向下移动此外，如果调整它的大小更多，选择器会变得更糟。有没有一种方法可以让选择器正常工作，使其能够填充包装器容器或只匹配文本 @导入url（'https://fonts.googleapis.com/css?family=Roboto'); @导入url（'https://use.fontawesome.com/releases/v5.0.13/css/all.css'); 身体{ 字体系列：“Roboto

我的代码如下，这给了我一些标签。我有一个选择器的问题，如果你点击底线选择器将不会向下移动

此外，如果调整它的大小更多，选择器会变得更糟。有没有一种方法可以让选择器正常工作，使其能够填充包装器容器或只匹配文本


@导入url（'https://fonts.googleapis.com/css?family=Roboto');
@导入url（'https://use.fontawesome.com/releases/v5.0.13/css/all.css');
身体{
字体系列：“Roboto”，无衬线；
}
.包装纸{
/*
文本对齐：居中；
*/
保证金：50px自动；
}
.标签{
边缘顶部：50px；
字体大小：15px；
填充：0px；
列表样式：无；
背景：#fff；
盒影：0px 5px 20px rgba（0,0,0,0.1）；
/*
显示：内联块；
*/
边界半径：50px；
位置：相对位置；
}
.标签a{
文字装饰：无；
颜色：#777；
文本转换：大写；
填充：10px 20px；
显示：内联块；
位置：相对位置；
z指数：1；
过渡时间：0.6s；
}
.选项卡a.活动{
颜色：#fff；
}
.标签a i{
右边距：5px；
}
.选项卡.选择器{
身高：100%；
显示：内联块；
位置：绝对位置；
左：0px；
顶部：0px；
z指数：1；
边界半径：50px；
过渡时间：0.6s；
过渡计时功能：立方贝塞尔（0.68，-0.55,0.265,1.55）；
背景：#05abe0；
背景：-莫兹线性梯度（45度，#0 0%，#8200f4 100%）；
背景：-webkit线性梯度（45度，#0 0%，#8200f4 100%）；
背景：线性梯度（45度，#0 0%，#8200f4 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#05abe0'，endColorstr='#8200f4'，GradientType=1）；
}
.选项卡内容{
显示：无；
}
.tabs-content.active{
显示：块；
}

培根ipsum dolor sit amet牛肉鹿肉牛肉排骨kielbasa。香肠猪leberkas，t骨牛腰肉肩
布雷萨奥拉。法兰克福后腿波切塔火腿。猪肚火腿胸脯肉糕短排骨。


胸脯肉丸火鸡短里脊肉boudin leberkas肉糕chuck andouille猪肉里脊肉pastrami排骨
潘切塔屁股。法兰克福腌牛肉里脊短里脊肉糕猪磨圆鹿肉。


培根益普生多洛坐艾米特·兰德杰格香肠胸脯，干鸡腿肥背肉饼球头turducken。
猪肉
肚皮肉丸子t骨短尾牛柳米格农凯文火鸡里贝耶小腿侧面多纳奶牛基尔巴萨小腿。
猪
猪鸡肉汉堡包，嫩里脊火鸡臀部球头牛腰肉法兰克福肉糕布丁胸脯火腿
典当。
汉堡包鹿肉胸脯三尖安多维尔猪肚皮球尖短排骨比尔顿肉丸夹头。猪排
里贝耶尾短排骨，牛肉汉堡肉丸kielbasa臀部腌牛肉波切塔兰杰格侧翼。多纳
臀部
法兰克福肉丸肉糕，牛凯文猪肉里脊鹿肉肥背排骨意大利腊肠排骨。


下颚肉干猪排舌头，kielbasa山鹿肉。Capicola shank猪里贝耶leberkas菲力牛排
牛里脊肉。Capicola肥背鹿肉小腿kielbasa，鸡腿里贝耶兰德杰格牛肉
凯文
尾肉丸子熏火腿。尾凯文排骨磨圆火腿飞节胸脯
肩膀。
腌牛肉三尖leberkas侧翼香肠火腿菲力牛排烤火鸡。

变量选项卡=$（'.tabs'）；
变量项=$（'.tabs'）。查找（'a'）。长度；
变量选择器=$（“.tabs”）.find（“.selector”）；
var activeItem=tabs.find（'.active'）；
var activeWidth=activeItem.innerWidth（）；
var activeHeight=activeItem.innerHeight（）；
$（“.selector”）.css({
“左”：activeItem.position.left+“px”，
“右”：activeItem.position.right+“px”，
“宽度”：activeWidth+“px”，
“高度”：活动高度+px”
});
$（“.tabs”）。在（“单击”，“a”，功能（e）{
e、 预防默认值（）；
$（'.tabs a'）.removeClass（“活动”）；
$（this.addClass（'active'）；
var activeWidth=$（this.innerWidth（）；
var itemPos=$（this.position（）；
$（“.selector”）.css({
“左”：itemPos.left+“px”，
“宽度”：activeWidth+“px”
});
//隐藏所有选项卡
$（'.tabs content'）.hide（）；
//获取已单击链接的id
var id=$（this.data（“id”）；
//显示当前选项卡
$（'#content'+id）.show（）；
});

不使用“选择器”div，您是否可以将样式应用于活动的“a”标记

编辑

好的，我看到您正在尝试对已单击项的选择器设置动画

将“右”和“下”添加到.CSS选择器中，如下所示：

.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>



培根ipsum dolor sit amet牛肉鹿肉牛肉排骨kielbasa。香肠猪leberkas，t骨牛腰肉肩
布雷萨奥拉。法兰克福后腿波切塔火腿。猪肚火腿胸脯肉糕短排骨。


土耳其人胸肉丸
<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>