1
ここに質問があります。 ホームリンクのコンテンツがデフォルトで表示されます。私たちのようなリンクをクリックするか、私たちに連絡してください。ここに私が使用したブートストラップコードがあります。リンクをnavbarに表示する方法を教えてください。これはタブリンクが動作していないブートストラップnavbar
<script>
//Functon to show divs from the nav menu
function show_div(toShow)
{
var show = document.getElementById(toShow);
show.style.display = "";
}
</script>
を助けすることができる
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Savitasoft</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="pull-left" href="#">
<img class="img-responsive" alt="Brand" src="bootstrap-3.3.7-dist/images/test.png"></img>
</a>
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#menu" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li class="active"> <a href="#Home">Home</a></li>
<li> <a href="#Services">Services</a></li>
<li> <a href="#About_us">About us</a></li>
<li> <a href="#Contact_us">Contact us</a></li>
</ul>
</div>
</div>
</nav>
<div class="tab-content" >
<div id="Home" class="tab-pane fade in active">
<p>These are the contents of Home </p>
</div>
<div id="Services" class="tab-pane fade">
<p>These are the contents of Services </p>
</div>
<div id="About_us" class="tab-pane fade">
<p>These are the contents of About us </p>
</div>
<div id="Contact_us" class="tab-pane fade">
<p>These are the contents of Contact us </p>
</div>
</div>
</body>
</html>
これを行うにはJqueryを使用してください。 – Abi