选项卡内容替代选项卡
tabs content overriding tabs
本文关键字:选项 更新时间:2023-09-26
我试图创建包含不同匹配项的选项卡,但在添加匹配div时,似乎会产生一些冲突。我想知道为什么匹配项没有作为其他选项卡中的文本放在下面,以及我如何修改以使其正确放置?
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
.tabs-menu {
height: 30px;
float: left;
clear: both;
}
.tabs-menu li {
height: 30px;
line-height: 30px;
float: left;
margin-right: 10px;
}
.tabs-menu li.current {
position: relative;
z-index: 5;
}
.tabs-menu li a {
text-transform: uppercase;
color: #000;
text-decoration: none;
}
.tabs-menu .current a {
color: #b93434;
}
.tabs-menu >li+li:before {
content: "/'00a0";
padding: 0 5px;
color: #ccc;
}
.tabs-menu >li {
display: inline-block;
}
.tabs-menu {
padding: 0px;
}
.breadcrumb .active a {
color: #b93434;
}
.tab {
background-color: #fff;
float: left;
margin-bottom: 20px;
width: auto;
}
.tab-content {
width: 100%;
display: none;
}
#tab-1 {
display: block;
}
.match-item {
background-color: #fafafa;
-webkit-box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .1 );
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .1 );
padding: 30px 20px;
margin: 0 0 20px 0;
-webkit-transition: all 300ms;
transition: all 300ms;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.match-item .match-info {
width: 100%;
height: 30px;
}
.match-item .team-info {
width: 100%;
height: 24px;
}
.match-item .match-date, .match-item .league-name {
color: #999;
font-size: 12px;
font-weight: bold;
}
.place-left {
float: left;
}
.place-right {
float: right;
}
.clear { clear: both; }
.match-item .team-info .column-third{
width: 33.333333333%;
float: left;
height: 24px;
display: inline-block;
}
.match-item .team-info .column-third .team-1-wrapper {
text-align: left;
height: 24px;
}
.match-item .team-info .column-third .team-2-wrapper {
text-align: right;
height: 24px;
}
.match-item .team-info .column-third .time-wrapper {
text-align: center;
height: 24px;
}
.match-item .team-info .column-third .team1-img {
width: 24px;
height: 24px;
margin-right: 4px;
vertical-align: middle;
}
.match-item .team-info .column-third .team2-img {
width: 24px;
height: 24px;
margin-left: 4px;
vertical-align: middle;
}
.match-item .team-info .column-third .the-team {
vertical-align: middle;
font-weight: 700;
color: #555555;
}
.match-item .team-info .column-third .the-time {
vertical-align: middle;
color: #555555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current">
<a href="#tab-1">Tab 1</a>
</li>
<li>
<a href="#tab-2">Tab 2</a>
</li>
<li>
<a href="#tab-3">Tab 3</a>
</li>
<li>
<a href="#tab-4">Tab 4</a>
</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<div class="match-item">
<div class="match-info">
<p class="place-left match-date">03 Feb 2014</p>
<p class="place-right league-name">League</p>
</div>
<div class="clear"></div>
<div class="team-info">
<div class="column-third">
<div class="team-1-wrapper">
<img class="team1-img" src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/051.png" alt="Real Madrid">
<span class="the-team">lol</span>
</div>
</div>
<div class="column-third">
<div class="time-wrapper">
<span class="the-time">20:45</span>
</div>
</div>
<div class="column-third">
<div class="team-2-wrapper">
<span class="the-team">lol</span>
<img class="team2-img" src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/011.png" alt="Real Madrid">
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="match-item">
<div class="match-info">
<p class="place-left match-date">03 Feb 2014</p>
<p class="place-right league-name">League Of Legends</p>
</div>
<div class="clear"></div>
<div class="team-info">
<div class="column-third">
<div class="team-1-wrapper">
<img class="team1-img" src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/051.png" alt="Real Madrid">
<span class="the-team">lol</span>
</div>
</div>
<div class="column-third">
<div class="time-wrapper">
<span class="the-time">20:45</span>
</div>
</div>
<div class="column-third">
<div class="team-2-wrapper">
<span class="the-team">lol</span>
<img class="team2-img" src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/011.png" alt="Real Madrid">
</div>
</div>
</div>
</div>
</div>
<div id="tab-2" class="tab-content">
<p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>
</div>
<div id="tab-3" class="tab-content">
<p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum. Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p>
</div>
<div id="tab-4" class="tab-content">
<p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis. Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra cursus odio. </p>
</div>
</div>
</div>
不要float:left
您的.tabs-menu
。或者clear
您的.tab
分区。
相关文章:
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- CKeditor:更改对话框中的默认选择选项
- JQuery覆盖不更改单选选项
- 活动选项卡's源代码-获取变量s值
- 绑定时将Parsley minlength消息作为选项传递时,未对其进行自定义
- 如何从选择框中的选项中获取属性值
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 如何从外部页面激活非默认引导选项卡
- Woocommerce产品选项有条件