如何点击按钮在顶部而不是中间加载导航标签页？
Posted
技术标签:
【中文标题】如何点击按钮在顶部而不是中间加载导航标签页？【英文标题】：How to get on click button to load the nav tab page at the top rather than in the middle? 【发布时间】：2018-10-07 10:22:19 【问题描述】：我有一个点击事件转到引导导航选项卡。当我单击该按钮时，它会转到选项卡页，但在中途。当用户单击他们从页面顶部而不是中途开始的按钮时，我试图拥有它。我已经尝试了几件事，但我似乎无法让它发挥作用。任何帮助将不胜感激！
$('#gotonew').click(function()
$('a[href="#whatsNew"]').click();
console.log($('a[href="#whatsNew"]').text() + ' click triggered');
);<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CDN -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body id="learn">
<!-- Nav Bar -->
<nav class="navbar navbar-nav fixed-top fixed-top-1 navbar-expand-sm navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse1 navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
<!-- container -->
</nav>
<!--First set of Nav Tabs-->
<nav class="navbar navbar-expand bg-inverse navbar-inverse fixed-top fixed-top-2">
<div class="container-fluid">
<div class="navbar-collapse collapse justify-content-left" id="navbar2">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active2" href="#overview" role="tab" data-toggle="tab">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gettingStarted" role="tab" data-toggle="tab">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#whatsNew" role="tab" data-toggle="tab">What's New</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Tab panes -->
<section id="subNavPanes">
<div class="tab-content">
<div role="tabpanel" class="tab-pane show fade active" id="overview">
<header>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container">
<div class="jumbotron">
<div class="row">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<!---Button I want to Link to What's New Tab-->
<p class="text-center"><button id="gotonew" class="btn btn-primary"><a href="#" data-toggle="tab">See all the new features</a></button></p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>footer</p>
</footer>
<!--The Nav Tab Page I'm trying to link to from the Overview Tab-->
<div role="tabpanel" class="tab-pane fade in" id="whatsNew">
<header>
<div class="container">
<div class="jumbotron">
<div class="row">
</div>
</div>
</div>
</header>
<section id="section6" class="d-none d-md-block">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center bhoechie-tab-container">
<div class="row">
<div class="col-md-3 bhoechie-tab-menu">
<div class="list-group .d-sm-block">
<a href="#stepOne" class="list-group-item active text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepTwo" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepThree" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepFour" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepFive" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
<a href="#stepSix" class="list-group-item text-center">
<h4>Objective and quantified</h4>
</a>
</div>
</div>
<div class="col-md-9 bhoechie-tab text-center">
<!-- flight section -->
<div id="stepOne" class="bhoechie-tab-content active">
<img class="img-fluid " src="" >
<div class="tab-text">
<h3>...</h3>
<p>...</p>
</div>
</div>
<!-- train section -->
<div id="stepTwo" class="bhoechie-tab-content">
<img class="img-fluid" src="" >
<div class="tab-text">
<h3>...</h3>
<p>....</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<p>footer...</p>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
</body>
</html>【问题讨论】：
【参考方案1】：我想出了一个解决办法。
`$('#gotonew').click(function()
$('a[href="#whatsNew"]').click();
$("html, body").animate( scrollTop: 0 , 600);
return false;
console.log($('a[href="#whatsNew"]').text() + ' click triggered');
);`
【讨论】：
以上是关于如何点击按钮在顶部而不是中间加载导航标签页？的主要内容，如果未能解决你的问题，请参考以下文章