个人中心
gpt4 book ai didi

javascript - 单页网站上的侧边栏菜单不起作用

转载 作者：行者123 更新时间：2023-11-28 01:17:07 25 4
gpt4 key购买 nike

我有一个包含很多内容的单页网站，左侧有一个粘性侧边栏导航。 I am trying to get the page to scroll down to the corresponding section in the contents div whenever a menu item is selected.这可能是非常基本的东西，但我就是无法理解它(一直在尝试各种解决方案，但没有成功——见下面的代码)。

我对 javascript 和 jquery 比较陌生，非常感谢您的想法/建议。

到目前为止我设法做了什么:

  • 边栏菜单是粘性的。
  • 当菜单项被选中时，侧边栏导航中链接的事件状态会发生变化。
  • 我还设法让内容 div 中的元素在选择相应的导航菜单项时更改事件状态。

现在所缺少的只是菜单链接的工作以及实际将页面下推到正​​确的部分 ID。

再次抱歉，如果这是一个非常愚蠢的问题，我非常感谢您提出任何建议。

$(function() {
  $('.feature_tab').click(function(evt) {
    var selectedTab = $(this);
	var featureGroup = selectedTab.parents('.features_public_content_container');
    var allTabs = featureGroup.find('.feature_tab');
    var allContent = featureGroup.find('.feature_box');

	// get the rel attribute to know what box we need to activate
	var rel = $(this).attr('rel');

	// clear tab selections
	allTabs.removeClass('selected');
	selectedTab.addClass('selected');

	// make all boxes "in-active"
	$('.feature_box').each(function() {
	$(this).removeClass('active');
	});

	//show what we need
	$('.feature_box.feature_category_'+rel).addClass('active');

	// find correlated content
	var idx = selectedTab.index();
	var selectedContent = $(allContent);
	selectedContent.removeClass('in-active');

	$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 1000);
    return false;
    });

  });
});
.hidden {
	display:block;
	color: blue;
	}

.features_page {
    margin-top:65px;
    position: relative;
	}


.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: 20%;
    border: 4px solid green !important;
    position: absolute;
	float: left
	}

#right {
    border: 4px solid pink !important;
	height: auto;
	max-width:80%;
	top: 0;
	right: 0;
	float: right;
	position: relative;
	}

.features_page .sidebar_nav_container {
	margin:45px auto;
	background: yellow;
    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:1px 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:80px;
	padding-top:45px;
	text-align: center;
	background: #f2f2f2;
	}

.features_page .feature_boxes_container .feature_box {
		background:#fff;
		display:inline-block;
		height:210px;
		width:235px;
		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 .feature_overview_icon {
	padding: 18px
	}

.features_page .feature_boxes_container .feature_box.active .feature_overview_icon {
	color: #1193f6;
}

.features_page .feature_boxes_container .feature_box.in-active .feature_overview_icon {
	color: #363636;
}
<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="left_sidebar">
                              
	    <div class="sidebar_nav_container">

		  <div class="feature_tab indicator feature_category_A selected" rel="A"><a href="#A">Features A</a></div>
		  <div class="feature_tab indicator feature_category_B" rel="B"><a href="#B">Features B</a></div>
		  <div class="feature_tab indicator feature_category_C" rel="C"><a href="#C">Features C</a></div>
		  <div class="feature_tab indicator feature_category_D" rel="D"><a href="#D">Features D</a></div>
		  <div class="feature_tab indicator feature_category_E" rel="E"><a href="#E">Features E</a></div>
        
        </div>
      
      </div> <!-- / sidebar navigation -->


      <div class="col span_10" id="right">

        <div class="feature_boxes_container">
          
                                  
          <div id="A"> <!-- START A Features -->

            <div class="feature_box feature_category_A active">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>
					
          
          <div id="B"> <!-- START B Features -->

            <div class="feature_box feature_category_B in-active">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>
          
       
          <div id="C"> <!-- START C Features -->

            <div class="feature_box feature_category_C in-active">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>
                                  
                                  
        </div> <!-- /.feature_boxes_container -->

      </div> <!-- /.col .span_10 -->

    </div> <!-- /.public_content_container -->

  </div> <!-- /.features_page -->

</div> <!-- /.layout_wrapper -->

</body>

</html>

最佳答案

可能你想要这个:

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

JSFiddle

另请参阅这些问题:

Simple jQuery scroll to anchor up or down the page...?

Smooth scrolling when clicking an anchor link

你也可以使用插件来做到这一点。喜欢 FullPage

关于javascript - 单页网站上的侧边栏菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35308174/

25 4 0
文章推荐： javascript - 制作位置 :absolute div relative after toggleFade()
文章推荐： javascript - 在 jQuery 中用 html 标记替换特定字符
文章推荐： javascript - 我无法将我 fork 的 Chrome 扩展中的元素居中
文章推荐： html - 在 css 之后 Bootstrap 空白空间
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com