无法弄清楚如何使这个导航选项卡成为下拉菜单
Cant figure out how to make this nav tab a dropdown menu
我只是没弄清楚语法
我试图在单击第二个按钮时出现下拉菜单。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation"><a href="#"><i class="fa fa-home fa-1g" aria-hidden="true"></i></a></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation"><a href="#">Pet Help</a></li>
<li role="presentation"><a href="#">Pets for Sale</a></li>
<li role="presentation"><a href="#">Pet Services</a></li>
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
</body>
</html>
我第一次尝试制作导航菜单。 (由于某些原因,我无法在不提供 "details" 的情况下提交此问题,因此请原谅此处无意义的文字)
我认为您错过了对汉堡包导航所需的 bootstrap 的 javascript 库的调用。在添加 jquery 引用(即 <script src="...jquery.min.js"...
)
后尝试添加此内容
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
有关详细信息,请参阅 Bootstrap 文档页面:Getting Started,以及下面更新的代码片段。
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -- >
<link rel="stylesheet" type="text/css" href="mystyle.css">-->
<!--end head: </head> start body:<body>-->
<ul class="nav nav-tabs">
<li role="presentation"><a href="#"><i class="fa fa-home fa-1g" aria-hidden="true"></i></a></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation"><a href="#">Pet Help</a></li>
<li role="presentation"><a href="#">Pets for Sale</a></li>
<li role="presentation"><a href="#">Pet Services</a></li>
</ul>
我只是没弄清楚语法 我试图在单击第二个按钮时出现下拉菜单。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation"><a href="#"><i class="fa fa-home fa-1g" aria-hidden="true"></i></a></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation"><a href="#">Pet Help</a></li>
<li role="presentation"><a href="#">Pets for Sale</a></li>
<li role="presentation"><a href="#">Pet Services</a></li>
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
</body>
</html>
我第一次尝试制作导航菜单。 (由于某些原因,我无法在不提供 "details" 的情况下提交此问题,因此请原谅此处无意义的文字)
我认为您错过了对汉堡包导航所需的 bootstrap 的 javascript 库的调用。在添加 jquery 引用(即 <script src="...jquery.min.js"...
)
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
有关详细信息,请参阅 Bootstrap 文档页面:Getting Started,以及下面更新的代码片段。
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -- >
<link rel="stylesheet" type="text/css" href="mystyle.css">-->
<!--end head: </head> start body:<body>-->
<ul class="nav nav-tabs">
<li role="presentation"><a href="#"><i class="fa fa-home fa-1g" aria-hidden="true"></i></a></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation"><a href="#">Pet Help</a></li>
<li role="presentation"><a href="#">Pets for Sale</a></li>
<li role="presentation"><a href="#">Pet Services</a></li>
</ul>