首頁猿問 Bootstrap...

Bootstrap 3：如何通過單擊當(dāng)前導(dǎo)航欄內(nèi)容中的超鏈接來鏈接到另一個(gè)導(dǎo)航欄？

JavaScript

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

我是使用 Bootstrap 的初學(xué)者。我搜索了很多相關(guān)問題，但沒有找到有用的解決方案。這是我的代碼的一部分：<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>我想做的是：點(diǎn)擊“常見問題解答”時(shí)，不僅可以顯示常見問題解答的內(nèi)容，還可以在導(dǎo)航欄上導(dǎo)航到“常見問題解答”，但現(xiàn)在還在“關(guān)于”欄下。

查看完整描述

1 回答

蝴蝶刀刀

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊

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

基本上，你會(huì)聽到新激活的剛剛顯示的選項(xiàng)卡，你會(huì)得到它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>

反對(duì) 回復(fù) 2023-05-11

1 回答
0 關(guān)注
218 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

Bootstrap 3：如何通過單擊當(dāng)前導(dǎo)航欄內(nèi)容中的超鏈接來鏈接到另一個(gè)導(dǎo)航欄？

Bootstrap 3：如何通過單擊當(dāng)前導(dǎo)航欄內(nèi)容中的超鏈接來鏈接到另一個(gè)導(dǎo)航欄？

1 回答

添加回答

Bootstrap 3：如何通過單擊當(dāng)前導(dǎo)航欄內(nèi)容中的超鏈接來鏈接到另一個(gè)導(dǎo)航欄？