需要一些关于页面标签的帮助。
1)我的页面上有以下标签。
默认情况下,当页面加载时,没有突出显示选项卡。我希望默认情况下突出显示“业务系统功能”选项卡。我如何实现这一目标?
2)当我选择标签时,标签颜色和边框颜色相同。
但是当我将鼠标悬停在任何其他标签上时,边框的颜色会变为hover
颜色。我不想要这个。我希望仅在单击选项卡时才更改边框颜色。我该如何实现这一目标?
我的代码 - fiddle
答案 0 :(得分:0)
这是解决方案。
在页面加载时将.tab1
设为当前/选中状态。将以下代码添加到$(document).ready()
。
$('.tab1').addClass('current');
$('.tab-content').css("border-top", "5px solid #3399CC");
$('#tab-1').addClass('current');
.hover()
以删除边框样式。示例代码段
$(document).ready(function() {
/* Apply current on Page load */
$('.tab1').addClass('current');
$('.tab-content').css("border-top", "5px solid #3399CC");
$('#tab-1').addClass('current');
$('ul.tabs li').click(function() {
var contentid = '#' + $(this).attr('datatab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$(contentid).addClass('current').css("border-top", "5px solid " + $(this).css("background-color"));
});
});

.home-tab-title {
width: 100%;
height: 65px;
padding: 10px 0 10px 0;
}
img.home-duck {
width: 35px;
float: left;
padding: 12px 10px 0 0;
}
.home-heading {
display: block;
float: left;
font-size: 22px;
margin-top: 20px;
margin-bottom: 20px;
clear: right;
font-family: "Segoe UI", arial, sans-serif;
}
.home-subheading {
margin-top: 10px;
margin-bottom: 10px;
}
.home-subheading {
font-size: 15px;
color: #000;
font-weight: 500;
font-family: "Segoe UI", arial, sans-serif;
display: inline-flex;
}
.tab-content1 {
margin-left: 2.2em;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
}
.tab-content1-block {
padding: 0 1em 1em .5em;
min-width: 30%;
}
.tab-content1-block ul li {
margin-bottom: 10px;
margin-left: -22px;
}
— css —
/* Hide the user navigation for community and anon on home. Shows it for pro members. */
.columbia-page-home .elm-header-user-nav {
display: none;
}
.columbia-page-home.elm-user-pro-member.columbia-page-home .elm-header-user-nav {
display: block;
}
/* Hide the user navigation for community and anon on home. */
.columbia-page-home .elm-header-home-nav {
display: none;
}
/* Hides the user nav's global search on home. */
.columbia-page-home .elm-global-search {
visibility: hidden;
}
/* Sets the correct positioning of the footer based on user role for home only. */
.columbia-page-home .elm-footer {
bottom: auto;
}
@media all and (min-width: 78.75em) {
.elm-user-pro-member.columbia-page-home .elm-footer {
bottom: 3.4em;
}
}
@media all and (min-width: 37.5em) {
.elm-user-pro-member.columbia-page-home .elm-footer {
bottom: auto;
}
}
li.ui-state-active {
padding-bottom: 0px !important;
}
— css —
/* Code for PageTabs template */
body .ui-tabs .ui-tabs-nav li a {
padding: .5em 1em;
width: 225px;
word-wrap: initial;
height: 25px;
text-align: center;
display: inline-block;
}
— css —
/* Code for new tabs */
. body {
margin-top: 100px;
font-family: 'Trebuchet MS', serif;
line-height: 1.6 float: left;
}
container {
width: auto;
margin: 0 0;
}
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: #EFEFEF;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-radius: 5px 5px 0px 0px;
}
.tab1:hover {
background: #3399CC;
color: #fff;
border: none;
}
.tab2:hover {
background: #12B58A;
color: #fff;
border: none;
}
.tab3:hover {
background: #673ab7;
color: #fff;
border: none;
}
.tab4:hover {
background: #336699;
color: #fff;
border: none;
}
.tab5:hover {
background: #3399CC;
color: #fff;
border: none;
}
.tab6:hover {
background: #12B58A;
color: #fff;
border: none;
}
.tab7:hover {
background: #673ab7;
color: #fff;
border: none;
}
.tab8:hover {
background: #336699;
color: #fff;
border: none;
}
.tab9:hover {
background: #3399CC;
color: #fff;
border: none;
}
.tab10:hover {
background: #12B58A;
color: #fff;
border: none;
}
.tab11:hover {
background: #673ab7;
color: #fff;
border: none;
}
.tab-link.tab1.current {
background: #3399CC;
color: #fff;
border: none;
}
.tab-link.tab2.current {
background: #12B58A;
color: #fff;
border: none;
}
.tab-link.tab3.current {
background: #673ab7;
color: #fff;
border: none;
}
.tab-link.tab4.current {
background: #336699;
color: #fff;
border: none;
}
.tab-link.tab5.current {
background: #3399CC;
color: #fff;
border: none;
}
.tab-link.tab6.current {
background: #12B58A;
color: #fff;
border: none;
}
.tab-link.tab7.current {
background: #673ab7;
color: #fff;
border: none;
}
.tab-link.tab8.current {
background: #336699;
color: #fff;
border: none;
}
.tab-link.tab9.current {
background: #3399CC;
color: #fff;
border: none;
}
.tab-link.tab10.current {
background: #12B58A;
color: #fff;
border: none;
}
.tab-link.tab11.current {
background: #673ab7;
color: #fff;
border: none;
}
.tab-content {
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current {
display: inherit;
border-top: 5px solid #3399CC;
background: #ffffff;
}
.tab-link {
margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li class="tab-link tab1" datatab="tab-1">'Business System Functionality'</li>
<li class="tab-link tab2" datatab="tab-2">'Product'</li>
<li class="tab-link tab3" datatab="tab-3">'Environment Administration'</li>
<li class="tab-link tab4" datatab="tab-4">'Training'</li>
<li class="tab-link tab5" datatab="tab-5">'Release Notes'</li>
<li class="tab-link tab6" datatab="tab-6">'Architecture'</li>
<li class="tab-link tab7" datatab="tab-7">'Testing'</li>
<li class="tab-link tab8" datatab="tab-8">'System Administration'</li>
<li class="tab-link tab9" datatab="tab-9">'Site Management'</li>
<li class="tab-link tab10" datatab="tab-10">'Staging'</li>
<li class="tab-link tab11" datatab="tab-11">'Regulatory Compliance Board'</li>
</ul>
<div id="tab-1" class="tab-content current">
Business System Functionality
</div>
</div>
&#13;
答案 1 :(得分:-1)
1)添加一个类,例如与您的悬停相同的active
.tab1:hover, .tab1.active {
background: #3399CC;
color: #fff;
border: none;
}
添加该类将突出显示您的元素
2)边框颜色根本不会改变,因为您要移除边框,border: none;
设置另一个border-color
或保持原样。