首頁猿問 Bootstrap...

Bootstrap 3：如何通過單擊當前導航欄內容中的超鏈接來鏈接到另一個導航欄？

JavaScript

幕布斯7119047 2023-05-11 14:46:24

我是使用 Bootstrap 的初學者。我搜索了很多相關問題，但沒有找到有用的解決方案。這是我的代碼的一部分：<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><div class="container">  <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand">Function Graph</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a data-toggle="tab" href="#about">About</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Plot<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a class="dropdown-item" data-toggle="tab" href="#automatic">Automatic</a></li> <li><a class="dropdown-item" data-toggle="tab" href="#manual">Manual</a></li> </ul> </li> <li><a data-toggle="tab" href="#faqs">FAQs</a></li> <li><a data-toggle="tab" href="#comment">Comment</a></li> <li><a data-toggle="tab" href="#contact">Contact</a></li> </ul> </div> </div> </nav>我想做的是：點擊“常見問題解答”時，不僅可以顯示常見問題解答的內容，還可以在導航欄上導航到“常見問題解答”，但現在還在“關于”欄下。

查看完整描述

1 回答

蝴蝶刀刀

TA貢獻1801條經驗獲得超8個贊

您可以使用官方文檔show.bs.tab中描述的方法。

基本上，你會聽到新激活的剛剛顯示的選項卡，你會得到它id并突出顯示nav.

這是代碼：

$('a[data-toggle="tab"]').on('shown.bs.tab', function() {

? $('nav').find('li.active').removeClass('active');

? $('nav').find('a[href="#'+$('.tab-pane.active').attr('id')+'"]').parent('li').addClass('active');

});

<script

? src="https://code.jquery.com/jquery-2.2.4.js"

? integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="

? crossorigin="anonymous"></script>

? ?

? ? <nav class="navbar navbar-default">

? ? ? <div class="container-fluid">

? ? ? ? <div class="navbar-header">

? ? ? ? ? <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"

? ? ? ? ? ? aria-expanded="true" aria-controls="navbar">

? ? ? ? ? ? <span class="sr-only">Toggle navigation</span>

? ? ? ? ? ? <span class="icon-bar"></span>

? ? ? ? ? </button>

? ? ? ? ? <a class="navbar-brand">Function Graph</a>

? ? ? ? </div>

? ? ? ??

? ? ? ? <div id="navbar" class="navbar-collapse collapse">

? ? ? ? ? <ul class="nav navbar-nav">

? ? ? ? ? ? <li class="active"><a data-toggle="tab" href="#about">About</a></li>

? ? ? ? ? ? <li class="dropdown">

? ? ? ? ? ? ? <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Plot<span class="caret"></span></a>

? ? ? ? ? ? ? <ul class="dropdown-menu">

? ? ? ? ? ? ? ? <li><a class="dropdown-item" data-toggle="tab" href="#automatic">Automatic</a></li>

? ? ? ? ? ? ? ? <li><a class="dropdown-item" data-toggle="tab" href="#manual">Manual</a></li>

? ? ? ? ? ? ? </ul>

? ? ? ? ? ? </li>

? ? ? ? ? ? <li><a data-toggle="tab" href="#faqs">FAQs</a></li>

? ? ? ? ? ? <li><a data-toggle="tab" href="#comment">Comment</a></li>

? ? ? ? ? ? <li><a data-toggle="tab" href="#contact">Contact</a></li>

? ? ? ? ? </ul>

? ? ? ? </div>

? ? ? </div>

? ? </nav>

? ?

? ? <div class="tab-content">

? ? ? <div class="tab-pane fade in active" id="about">

? ? ? ? <div class="jumbotron">

? ? ? ? ? <h1>Draw your math function on web</h1>

? ? ? ? ? <p>If you have any problems, please navigate to <em><strong><a data-toggle="tab" href="#faqs">FAQs</a></strong></em> on the top and there are some solutions.</p>

? ? ? ? ? <p>If you still have unsolved questions, please don't hesitate to <em><strong><a data-toggle="tab" href="#contact">Contact</a></strong></em> us via e-mail.</p>

? ? ? ? </div>

? ? ? </div>

? ? ? <div class="tab-pane fade" id="automatic">

? ? ? ? <p>automatic</p>

? ? ? </div>

? ? ? <div class="tab-pane fade" id="manual">

? ? ? ? <p>manual</p>

? ? ? </div>

? ? ??

? ? ? <div class="tab-pane fade" id="faqs">

? ? ? ? <p>faqs</p>

? ? ? </div>

? ? ? <div class="tab-pane fade" id="comment">

? ? ? ? <p>comment</p>

? ? ? </div>

? ? ? <div class="tab-pane fade" id="contact">

? ? ? ? <p>contact</p>

? ? ? </div>

? ? </div>

? </div>

反對回復 2023-05-11

1 回答
0 關注
221 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Bootstrap 3：如何通過單擊當前導航欄內容中的超鏈接來鏈接到另一個導航欄？

Bootstrap 3：如何通過單擊當前導航欄內容中的超鏈接來鏈接到另一個導航欄？

1 回答

添加回答

Bootstrap 3：如何通過單擊當前導航欄內容中的超鏈接來鏈接到另一個導航欄？