单页网站粘性导航:更改内容元素的活动状态
single page site sticky nav: changing active state of content elements
我有一个单页网站，左侧有一个固定的(粘性(侧边栏导航菜单和一个包含内容的主div。主div 分为 5 个部分，每个 id 中有许多元素。
我正在尝试实现与导航菜单和主要内容div 中的元素相关的一些相互依赖/动态状态更改，但我正在努力使等式的所有部分都正常工作。请参阅下面的代码。
- 选择菜单项时
a.( 其状态应更改为"已选择";和
b( 页面应平滑滚动到主div 中的相应部分 ID;和
c( 主div 中与所选菜单项对应的元素应将状态更改为"活动"。
- 当用户上下滚动页面时：
a.( 导航应根据视图中的当前部分("已选择"(自行更新;和
b.( 主要内容div 中的元素在进入视口中心时应更改状态("活动"(。
(我意识到1.c和2.b点或多或少可以互换，但不确定最好遵循哪种逻辑。
从上面的列表中，到目前为止，第 1 点似乎工作正常，但是当我尝试根据滚动位置更新导航时，我的代码开始分崩离析。我有限的JavaScript技能遇到了障碍，非常感谢您的建议。
$(function() {
$('.nav_menu_item a').click(function(evt) {
var selectedTab = $(this);
var featureGroup = selectedTab.parents('.sidebar_nav_container');
var allTabs = featureGroup.find('.nav_menu_item a');
var allContent = featureGroup.find('.feature_box');
// get the rel attribute to know what box we need to activate
var rel = $(this).parent().attr('rel');
// clear tab selections
allTabs.removeClass('selected');
selectedTab.addClass('selected');
// make all boxes "in-active"
$('.feature_box').each(function() {
$(this).removeClass('active');
$(this).removeClass('in-active');
});
//show what we need
$('.feature_category_'+rel).addClass('active');
// find correlated content
var idx = selectedTab.index();
var selectedContent = $(allContent);
selectedContent.removeClass('in-active');
$('html, body').animate({
scrollTop: $("#"+rel).offset().top -90
}, 800);
});
});
$(document).ready(function () {
var length = $('#sidebar_wrapper').height() - $('.sidebar_nav_container').height() + $('#sidebar_wrapper').offset().top;
$(window).scroll(function () {
var scroll = $(this).scrollTop();
var height = $('.sidebar_nav_container').height() + 'px';
if (scroll < $('#sidebar_wrapper').offset().top) {
$('.sidebar_nav_container').css({
'position': 'absolute',
'top': '0'
});
} else if (scroll > length) {
$('.sidebar_nav_container').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$('.sidebar_nav_container').css({
'position': 'fixed',
'top': '45px',
'height': height
});
}
});
});
$(document).ready(function () {
(function highlightNav() {
var prev; //keep track of previous selected link
var isVisible= function(el){
el = $(el);
if(!el || el.length === 0){
return false
};
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = el.offset().top;
var elemBottom = elemTop + el.height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
$(window).scroll(function(){
$('.sidebar_nav_container > .nav_menu_item a').each(function(index, el){
el = $(el);
if(isVisible(el.attr('href'))){
if(prev){
prev.removeClass('selected');
}
el.addClass('selected');
prev = el;
//break early to keep highlight on the first/highest visible element
//remove this you want the link for the lowest/last visible element to be set instead
return false;
}
});
});
//trigger the scroll handler to highlight on page load
$(window).scroll();
})();
});.hidden {
display:block;
color: blue;
}
.features_page {
margin-top:12px;
position: relative;
}
.container {
margin:0 auto;
padding-left:12px;
padding-right:12px
}
.container .features_public_content_container {
height: 100% !important;
position: relative;
max-width:1200px;
margin-left:auto;
margin-right:auto;
font-size:12px;
padding:auto;
}
.col {
display:block;
float:left;
width:100%;
}
.span_2 {
width: 20%;
}
.span_10 {
width: 80%;
}
#sidebar_wrapper {
height: 100% !important;
position: fixed;
float: left;
padding-top: 12px;
}
#right {
height: auto;
top: 0;
right: 0;
float: right;
position: relative;
}
.sidebar_nav_container {
margin:auto;
position: relative;
float: left
}
.sidebar_nav_container .nav_menu_item a {
float:left;
width:100%;
color:#1193f6 !important;
text-align: left;
line-height:40px;
height:40px;
padding-left: 24px;
border-left: 1px solid #efefef;
text-transform:uppercase;
font-size:12px;
font-weight:500;
overflow:hidden;
cursor:pointer;
position:relative
}
.sidebar_nav_container .nav_menu_item a .indicator {
position:relative;
width:100%;
height: 100%;
display:none;
bottom:0;
left: 0
}
.sidebar_nav_container .nav_menu_item a.indicator:hover {
display:block;
border-left:4px solid #d6ecfd;
}
.sidebar_nav_container .nav_menu_item a.selected {
display:block;
border-left:4px solid #1193f6;
}
.feature_boxes_container {
padding-bottom:12px;
padding-top:12px;
text-align: center !important;
background: #f2f2f2;
}
.feature_boxes_container .feature_box {
float: none;
text-align: center;
display: inline-block;
position: relative;
background:#fff;
height:60px;
width:60px;
margin:12px;
padding: 24px;
vertical-align:top;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-ms-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-o-box-shadow:0 1px 3px rgba(0,0,0,0.12);
box-shadow:0 1px 3px rgba(0,0,0,0.12)
}
.feature_boxes_container .feature_box.active {
border: 2px solid #1193f6;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body id='public_layout' class='with_header'>
<div class="layout_wrapper">
<div class="features_page">
<div class="container features_public_content_container">
<div class="col span_2" id="sidebar_wrapper">
<div class="sidebar_nav_container">
<div class="nav_menu_item feature_category_A selected" rel="A">
<a href="#A" class="indicator">Features A</a>
</div>
<div class="nav_menu_item feature_category_B" rel="B">
<a href="#B" class="indicator">Features B</a>
</div>
<div class="nav_menu_item feature_category_C" rel="C">
<a href="#C" class="indicator">Features C</a>
</div>
<div class="nav_menu_item feature_category_D" rel="D">
<a href="#D" class="indicator">Features D</a>
</div>
<div class="nav_menu_item feature_category_E" rel="E">
<a href="#E" class="indicator">Features E</a>
</div>
</div> <!-- / .sidebar_nav_container -->
</div> <!-- / #left-sidebar -->
<div class="col span_10" id="right">
<div class="feature_boxes_container">
<!-- Features A -->
<div class="feature_box feature_category_A active" id="A">Feature A-1</div>
<div class="feature_box feature_category_A active">Feature A-2</div>
<div class="feature_box feature_category_A active">Feature A-3</div>
<div class="feature_box feature_category_A active">Feature A-4</div>
<div class="feature_box feature_category_A active">Feature A-5</div>
<!-- Features B -->
<div class="feature_box feature_category_B in-active" id="B">Feature B-1</div>
<div class="feature_box feature_category_B in-active">Feature B-2</div>
<div class="feature_box feature_category_B in-active">Feature B-3</div>
<div class="feature_box feature_category_B in-active">Feature B-4</div>
<div class="feature_box feature_category_B in-active">Feature B-5</div>
<!-- Features C -->
<div class="feature_box feature_category_C in-active" id="C">Feature C-1</div>
<div class="feature_box feature_category_C in-active">Feature C-2</div>
<div class="feature_box feature_category_C in-active">Feature C-3</div>
<div class="feature_box feature_category_C in-active">Feature C-4</div>
<div class="feature_box feature_category_C in-active">Feature C-5</div>
<!-- Features D -->
<div class="feature_box feature_category_D in-active" id="D">Feature D-1</div>
<div class="feature_box feature_category_D in-active">Feature D-2</div>
<div class="feature_box feature_category_D in-active">Feature D-3</div>
<div class="feature_box feature_category_D in-active">Feature D-4</div>
<div class="feature_box feature_category_D in-active">Feature D-5</div>
<!-- Features E -->
<div class="feature_box feature_category_E in-active" id="E">Feature E-1</div>
<div class="feature_box feature_category_E in-active">Feature E-2</div>
<div class="feature_box feature_category_E in-active">Feature E-3</div>
<div class="feature_box feature_category_E in-active">Feature E-4</div>
<div class="feature_box feature_category_E in-active">Feature E-5</div>
</div> <!-- /.feature_boxes_container -->
</div> <!-- / #right -->
</div> <!-- / .container .features_public_content_container -->
</div> <!-- / .features_page -->
</div> <!-- / .layout_wrapper -->
</body>
</html>好的，所以这是最终让它工作的 jQuery 代码：
$(window).on("scroll", function(){
$( ".feature_category" ).each(function() {
var sectionID = $(this).attr("id");
if ( $(window).scrollTop() >= $(this).offset().top -180) {
$('.nav_menu_item a.selected').removeClass("selected");
$('.nav_menu_item a[href=''#'+sectionID+''']').parent().addClass("selected");
$('.main_contents .feature_boxes_container .feature_category').removeClass('active');
$('#'+sectionID+'').addClass('active');
}
});
});
// Cache selectors
var topMenu = $(".sidebar_nav_container"),
topMenuHeight = topMenu.outerHeight(),
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+36;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
$(window).scroll(function(){
menuItems
.parent().removeClass("selected")
.end().filter("[href=#"+id+"]").parent().addClass("selected");
});
});
$(document).ready(function () {
var length = $('#sidebar_wrapper').height() - $('.sidebar_nav_container').height() + $('#sidebar_wrapper').offset().top;
$(window).scroll(function () {
var scroll = $(this).scrollTop();
var height = $('.sidebar_nav_container').height() + 'px';
if (scroll < $('#sidebar_wrapper').offset().top -90) {
$('.sidebar_nav_container').css({
'position': 'absolute',
'top': '0'
});
} else if (scroll > length) {
$('.sidebar_nav_container').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$('.sidebar_nav_container').css({
'position': 'fixed',
'top': '60px',
'height': height
});
}
});
});我设法根据其他 stackoverflow 答案以及这里的一些有用指针将其拼凑在一起。这可能是你见过的最糟糕的意大利面条代码，但它有效。
好的，
所以我想我会插话，也许提供更好的设置。 使用您的演示 javascript，我只能假设您将有一个页眉和页脚，并且您希望您的菜单贴上然后在某个点停止，但我不完全确定，因为在您的演示中并非如此，您只有一个正常的固定菜单。 因此，我添加了附加样式，一旦您滚动到页眉上方，菜单就会修复，然后在到达页脚时停止。然后，主要内容和导航中的项目的活动类将在滚动时更改。 所以我的建议是使用 jquery 每个函数，然后将你的项目包装在一个跨度中，并为该跨度提供一类功能类别和该跨度的 id。 然后，每次窗口滚动到此范围时，您都可以触发更改类的函数。 唯一的问题是，如果 2 个部分占据同一行，那么您会遇到问题，所以我建议您的功能框具有百分比宽度并将百分比设置为最小数量的框，因此，如果您每个部分至少有 4 个功能框，请将宽度设置为 25%。 然后，您可以使用媒体查询在较小的屏幕上放大它们。
这是一个工作的小提琴演示小提琴
因此，您的 html 标记将如下所示：
<div class='pub_site_nav'>
<div class="container">
Page navigation menu
</div>
</div> <!-- /.container .pub_site_nav -->
<div class="features_page">
<div class="story_section_container">
<div class="container">
Hero section
</div>
</div><!-- /.container .pub_site_nav -->
<div class="main_contents">
<div class="container">
<div id="sidebar_wrapper">
<div class="sidebar_nav_container">
<div class="nav_menu_item selected"><a href="#A">Features A</a></div>
<div class="nav_menu_item"><a href="#B">Features B</a></div>
<div class="nav_menu_item"><a href="#C">Features C</a></div>
<div class="nav_menu_item"><a href="#D">Features D</a></div>
<div class="nav_menu_item"><a href="#E">Features E</a></div>
</div><!-- /.sidebar_nav_container-->
</div><!-- /.#sidebar_wrapper-->
<div class="feature_boxes_container">
<span class="feature_category active" id="A">
<div class="feature_box_wrapper">
<div class="feature_box">Feature A-1</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature A-2</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature A-3</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature A-4</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature A-5</div>
</div>
</span>
<span class="feature_category" id="B">
<div class="feature_box_wrapper">
<div class="feature_box">Feature B-1</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature B-2</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature B-3</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature B-4</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature B-5</div>
</div>
</span>
<span class="feature_category" id="C">
<div class="feature_box_wrapper">
<div class="feature_box">Feature C-1</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature C-2</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature C-3</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature C-4</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature C-5</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature C-6</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature C-7</div>
</div>
</span>
<span class="feature_category" id="D">
<div class="feature_box_wrapper">
<div class="feature_box">Feature D-1</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature D-2</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature D-3</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature D-4</div>
</div>
</span>
<span class="feature_category" id="E">
<div class="feature_box_wrapper">
<div class="feature_box">Feature E-1</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature E-2</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature E-3</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature E-4</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature E-5</div>
</div>
<div class="feature_box_wrapper">
<div class="feature_box">Feature E-6</div>
</div>
</span>
</div><!-- /.feature_boxes_container-->
</div><!-- /.container-->
</div><!-- /.container .main_contents -->
<div class="random_content" style="height:800px;background:#111;"></div>
<div class="public_footer">
<div class="container">
Footer
</div>
</div> <!-- / .container .public_footer -->
</div><!-- /.features_page -->
然后你的Jquery将看起来像这样：
$(window).on("scroll", function(){
$( ".feature_category" ).each(function() {
var sectionID = $(this).attr("id");
if ( $(window).scrollTop() >= $(this).offset().top - 220 ) {
$('.nav_menu_item.selected').removeClass("selected");
$('.nav_menu_item a[href=''#'+sectionID+''']').parent().addClass("selected");
$('.feature_category').removeClass('active');
$('#'+sectionID+'').addClass('active');
}
});
/*Affix code*/
var contentTop = $("#sidebar_wrapper").offset().top - 68;
var footerTop = $(".random_content").offset().top - $('.sidebar_nav_container').outerHeight() - 65;
if ( $(this).scrollTop() >= contentTop) {
$( '.sidebar_nav_container' ).addClass("fixed");
}else{
$( '.sidebar_nav_container' ).removeClass("fixed");
}
if ( $(window).scrollTop() >= footerTop) {
$( '.sidebar_nav_container' ).addClass("absolute_bottom");
}else{
$( '.sidebar_nav_container' ).removeClass("absolute_bottom");
}
});
$( document ).on( "click", ".sidebar_nav_container a", function(e) {
e.preventDefault();
var sectionID = $(this).attr("href");
$('html, body').animate({
scrollTop: $(sectionID).offset().top - 200
}, 800);
});
我在jquery代码中添加了一些注释，如果您不尝试使用它，则可以删除菜单附加代码。 然后，您可以在菜单中使用正常位置固定的css。
最后，这是您将使用的css：
body,html{
padding: 0;
margin: 0;
max-width: 100%;
background: #fff;
}
/*easier to have your container with margin and not padding that way your element is actually in that position and not padding to that position*/
.container {
margin:0 80px;
position:relative;
}
.pub_site_nav {
position:fixed;
width:100%;
z-index:10;
top:0;
left: 0;
height:68px;
line-height:64px;
background:yellow;
}
.features_page{
margin-top:65px;
}
.features_page .story_section_container {
background-color:#888;
padding-bottom:100px;
padding-top:72px;
text-align:left
}
/*Better to have a fixed width for your sidebar that way everything will work properly when your sidebar goes fixed because you need to account for your .container margin once it is in fixed position you can do it with a percentage if you use css calc but it has less browser compatibility also your main_contents should not have a max-width because when the sidebar goes fixed it will be in the wrong position if the screen goes above the max-width of the container*/
#sidebar_wrapper {
position: absolute;
left: 0;
top: 0;
bottom:0;
width: 200px;
background:orange;
}
.sidebar_nav_container {
padding: 24px 0;
width: 200px;
}
.sidebar_nav_container.fixed{
position:fixed;
top:68px;
left:80px;
}
.sidebar_nav_container.absolute_bottom{
position:absolute;
top:auto;
bottom: 0;
left:0;
}
.sidebar_nav_item{
width:100%;
padding:0;
margin:0;
}
.sidebar_nav_container .nav_menu_item a {
text-align: left;
padding:10px 10px 10px 24px;
border-left: 1px solid #efefef;
text-transform:uppercase;
text-decoration: none;
font-size:12px;
font-weight:500;
position:relative;
display:block;
/*so nav item doesn't jump on hover*/
border:4px solid transparent;
}
.sidebar_nav_container .nav_menu_item a:hover {
border-left:4px solid #d6ecfd;
}
.sidebar_nav_container .nav_menu_item.selected a {
border-left:4px solid #1193f6;
}
.feature_boxes_container{
background: #f2f2f2;
padding:45px 0 80px 0;
margin-left:200px;
/*The Following 2 lines removes the whitespace from feature box wrapper so they will align with a width of 25%*/
font-size:0;
zoom: 1;
}
.feature_box_wrapper{
width:25%;
margin:0;
padding:0;
display:inline-block;
}
.feature_boxes_container .feature_box {
text-align: center;
background:#fff;
margin:10px;
padding: 24px;
height:100px;
/*so everything aligns properly and doesn't jump when activated*/
border:2px solid transparent;
font-size:12px;
}
.feature_boxes_container .feature_category.active .feature_box {
border: 1px solid red
}
.features_page .public_footer {
padding: 60px 0;
background: green;
}
@media screen and (max-width: 1049px){
.feature_box_wrapper{width: 50%; }
}
@media screen and (max-width: 767px){
.container{margin:0 10px; }
#sidebar_wrapper{width: 125px; }
.sidebar_nav_container{width:125px; }
.sidebar_nav_container.fixed{left:10px; }
.sidebar_nav_container.absolute_bottom{left:0; }
.feature_boxes_container{margin-left:125px; }
.feature_box_wrapper{width: 100%; }
}
css 可能有点混乱，因为我只是很快把它放在一起，但我认为你可以弄乱它并制作自己的布局，但这应该让你开始。
如果您有任何问题，请随时评论我，希望这对:)有所帮助
让我们检查一下您问题的某些部分。将更新完整答案
$(function() {
$('.nav_menu_item a').click(function(evt) {
var selectedTab = $(this);
var featureGroup = selectedTab.parents('.sidebar_nav_container');
var allTabs = featureGroup.find('.nav_menu_item a');
var allContent = featureGroup.find('.feature_box');
// get the rel attribute to know what box we need to activate
var rel = $(this).parent().attr('rel');
// clear tab selections
allTabs.removeClass('selected');
selectedTab.addClass('selected');
// make all boxes "in-active"
$('.feature_box').each(function() {
$(this).removeClass('active');
$(this).removeClass('in-active');
});
//show what we need
$('.feature_category_'+rel).addClass('active');
// find correlated content
var idx = selectedTab.index();
var selectedContent = $(allContent);
selectedContent.removeClass('in-active');
$('html, body').animate({
scrollTop: $("#"+rel).offset().top
}, 2000);
});
});
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top -90
}, 800);
}); .clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.hidden {
display:block;
color: blue;
}
.container {
margin:0 auto;
padding-left:80px;
padding-right:80px
}
.features_public_content_container {
width:100%;
height: 100% !important;
position: relative;
max-width:1200px;
margin-left:auto;
margin-right:auto;
font-size:12px;
padding:0 40px
}
#left_sidebar {
height: 100% !important;
width: 25% !important;
position: fixed;
float: left
}
#right {
height: auto;
max-width:75% !important;
top: 0;
right: 0;
float: right;
position: relative;
}
.features_page {
margin-top:12px;
position: relative;
}
.features_page .sidebar_nav_container {
margin: auto;
position: relative;
float: left
}
.features_page .sidebar_nav_container .feature_tab {
float:none;
width:100%;
color:#1193f6 !important;
text-align: left;
line-height:40px;
height:40px;
padding-left: 24px;
font-size:12px;
border-left:2px solid #efefef !important;
text-transform:uppercase;
font-weight:500;
overflow:hidden;
cursor:pointer;
position:relative
}
.features_page .sidebar_nav_container .feature_tab .indicator {
position:absolute;
width:100%;
height: 100%;
display:none;
bottom:0;
left: 0
}
.features_page .sidebar_nav_container .feature_tab:hover .indicator {
display:block;
border-left:4px solid #d6ecfd
}
.features_page .sidebar_nav_container .feature_tab.selected .indicator {
display:block;
border-left:4px solid #1193f6;
}
.features_page .feature_boxes_container {
padding-bottom:12px;
padding-top:12px;
text-align: center;
background: #f2f2f2;
}
.features_page .feature_boxes_container .feature_box {
background:#fff;
display:inline-block;
height:150px;
width:60px;
margin:12px;
padding: 24px;
text-align:center;
vertical-align:top;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-ms-box-shadow:0 1px 3px rgba(0,0,0,0.12);
-o-box-shadow:0 1px 3px rgba(0,0,0,0.12);
box-shadow:0 1px 3px rgba(0,0,0,0.12)
}
.features_page .feature_boxes_container .feature_box.active {
border: 2px solid #1193f6;
}
.features_page .feature_boxes_container .feature_box.in-active .feature_overview_icon {
color: #363636;
}
.nav_menu_item {
margin: 8px 0;
}
.nav_menu_item a{padding: 5px;}
.nav_menu_item .selected {
background-color: black;
border: 1px dotted red;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout_wrapper">
<div class="features_page">
<div class="container features_public_content_container clearfix">
<div class="col span_2 clearfix" id="left_sidebar">
<div class="sidebar_nav_container">
<div class="nav_menu_item feature_category_A selected" rel="A">
<a href="#A" class="indicator">Features A</a>
</div>
<div class="nav_menu_item feature_category_B" rel="B">
<a href="#B" class="indicator">Features B</a>
</div>
<div class="nav_menu_item feature_category_C" rel="C">
<a href="#C" class="indicator">Features C</a>
</div>
<div class="nav_menu_item feature_category_D" rel="D">
<a href="#D" class="indicator">Features D</a>
</div>
<div class="nav_menu_item feature_category_E" rel="E">
<a href="#E" class="indicator">Features E</a>
</div>
</div> <!-- / .sidebar_nav_container -->
</div> <!-- / #left-sidebar -->
<div class="col span_10" id="right">
<div class="feature_boxes_container">
<!-- Features A -->
<div class="feature_box feature_category_A active" id="A">Feature A-1</div>
<div class="feature_box feature_category_A active">Feature A-2</div>
<div class="feature_box feature_category_A active">Feature A-3</div>
<div class="feature_box feature_category_A active">Feature A-4</div>
<div class="feature_box feature_category_A active">Feature A-5</div>
<!-- Features B -->
<div class="feature_box feature_category_B in-active" id="B">Feature B-1</div>
<div class="feature_box feature_category_B in-active">Feature B-2</div>
<div class="feature_box feature_category_B in-active">Feature B-3</div>
<div class="feature_box feature_category_B in-active">Feature B-4</div>
<div class="feature_box feature_category_B in-active">Feature B-5</div>
<!-- Features C -->
<div class="feature_box feature_category_C in-active" id="C">Feature C-1</div>
<div class="feature_box feature_category_C in-active">Feature C-2</div>
<div class="feature_box feature_category_C in-active">Feature C-3</div>
<div class="feature_box feature_category_C in-active">Feature C-4</div>
<div class="feature_box feature_category_C in-active">Feature C-5</div>
<!-- Features D -->
<div class="feature_box feature_category_D in-active" id="D">Feature D-1</div>
<div class="feature_box feature_category_D in-active">Feature D-2</div>
<div class="feature_box feature_category_D in-active">Feature D-3</div>
<div class="feature_box feature_category_D in-active">Feature D-4</div>
<div class="feature_box feature_category_D in-active">Feature D-5</div>
<!-- Features E -->
<div class="feature_box feature_category_E in-active" id="E">Feature E-1</div>
<div class="feature_box feature_category_E in-active">Feature E-2</div>
<div class="feature_box feature_category_E in-active">Feature E-3</div>
<div class="feature_box feature_category_E in-active">Feature E-4</div>
<div class="feature_box feature_category_E in-active">Feature E-5</div>
</div> <!-- /.feature_boxes_container -->
</div> <!-- / #right -->
</div> <!-- / .container .features_public_content_container -->
</div> <!-- / .features_page -->
</div>相关文章：
- 在Angular 2中布线期间保持零部件处于活动状态
- 如何使bxslider仅在移动视图中处于活动状态
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 我如何为列出的选项卡元素编写一个Protractor测试，它会检查它是否's是否处于活动状态
- 返回上一页时，Javascript仍处于活动状态
- Angular+bootstrap ui，检查当前选项卡是否已处于活动状态
- 仅悬停一个元素(活动元素）
- 如何在每次页面重新加载时更改渐变背景，同时保持光标位置元素处于活动状态
- 当内容为空但超链接处于活动状态时删除元素
- 将焦点设置在带有错误消息的第一个输入元素上，并将包含它的 TabStrip 选项卡设置为活动状态
- 如何防止元素保持活动状态
- 单页网站粘性导航:更改内容元素的活动状态
- 当其他元素处于活动状态时，jQuery 不显示隐藏元素
- j查询手风琴 |打开页面加载和活动状态混淆的第一个元素
- 在Chrome扩展弹出窗口中保持Flash元素处于活动状态
- 当另一个元素处于活动状态时，jQuery会更改该元素的css
- 在IE上组合了活动状态伪类和相邻元素选择器
- 如何在HTML元素处于活动状态时才启用验证?
- javascript:如何仅在父元素处于活动状态且子元素具有特定类的情况下向子元素添加属性
