Question

所以我的html中有一个小标签设置。像这样：

<ul id="tabs">
    <li><a href="#tab_div_1">Tab link 1</a></li>
    <li><a href="#tab_div_2">Tab link 2</a></li>
    <li><a href="#tab_div_3">Tab link 3</a></li>
    <li><a href="#tab_div_4">Tab link 4</a></li>
</ul>
<div id="tab_content">
    <div id="tab_div_1">Tab content 1</div>
    <div id="tab_div_2">Tab content 2</div>
    <div id="tab_div_3">Tab content 3</div>
    <div id="tab_div_4">Tab content 4</div>
</div>

所以很明显，每个“标签链接”都会打开一个特定的“标签内容div”。

现在，... ...我希望得到position(top) ul#tabs a padding-top并将其#tab_div归属于var tabLink = $( "a[href='#tab_div_1']" ); var position = tabLink.position(); var tabTarget = $("#tab_div_1"); tabTarget.css("padding-top",position.top );。

我可以这样做：

div {
    background-image: url(http://i.imgur.com/I86rTVl.jpg);
    width: 500px;
    height: 300px;
    border: 1px solid red;
    display:table;
    
}

span {
    display:table-cell;
    text-align: center;
    width: 100%;
    vertical-align:middle;
    border: 1px solid blue;
    font-size: 72px
}

为每个标签重复一次。

但我想用循环使用vanila javascript或jquery来做。

Answer 1

您可以使用：

$('#tabs').find('a').each(function(i, el){
    var $el = $(el);
    var position = $el.position();
    var target = $el.attr('href');
    $(target).css('padding-top', position.top);
});

Answer 2

您可以向每个标签添加一个类，然后使用vanilla JS getElementsByClassName()。你将得到一个类似于所需元素的数组，你将能够循环throgh。

使用循环为每个元素子项添加样式

2 个答案: