我创建了一个带标签的导航栏。我可以点击标签并显示一个内容。我还在同一个导航栏中创建了一个下拉列表。单击下拉列表中的项目不起作用。
我检查了几个例子，但在这些例子中，它正在工作（至少对我而言）。
工作示例：http://www.live-military-mode-s.eu/mobile/index.php 例如GMT Tab正在运行。下拉列表，项目操作无效。
有什么想法吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Live Military Mode-s</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-responsive.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap-dropdown.js"></script>
<style type="text/css">
.navbar-collapse.in {
overflow-y: visible;
}
body {
margin: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#myButton").click(function(){
var mytime= new Date().getTime();
var str="test";
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("sectionHome").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","gmt_2.php",true);
xmlhttp.send();
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab li:eq(25)").tab('show');
});
</script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<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" href="index.php"><span class="glyphicon glyphicon-home"></span> Home</a>
</div>
<div class="navbar-collapse collapse" id="example-navbar-collapse">
<ul class="nav nav-tabs" id="myTab">
<li> <a data-toggle="tab" href="#sectionA">GMT</a></li>
<li> <a data-toggle="tab" href="#sectionB">North America</a></li>
<li><a data-toggle="tab" href="#sectionD">Latin America</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#sectionA">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#sectionA">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="tab-content">
<div id="sectionHome" class="tab-pane fade in active" >
<div class="container-fluid">
<center><img src="image/lmms (2).png" class="img-responsive" alt="button LMMS">
<p> </p><p> </p>
<div class="row">
<div class="col-sm-6">
<button name="button" id="myButton" class="btn btn-info btn-responsive btn-lg" > How to Join</button>
<button class="btn btn-info btn-responsive btn-lg">Contact</button>
<button class="btn btn-info btn-responsive btn-lg">Forum</button>
<button class="btn btn-info btn-responsive btn-lg">Log Files</button>
<button class="btn btn-info btn-responsive btn-lg">Locations Online</button>
<button class="btn btn-info btn-responsive btn-lg">Public Pages</button>
<button class="btn btn-info btn-responsive btn-lg">Search</button>
<button class="btn btn-info btn-responsive btn-lg">Unkown Codes</button>
<button class="btn btn-info btn-responsive btn-lg">Top 10 Pages</button>
</div>
</div>
<p> </p><p> </p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-3270342864423806";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><p>
</script>
</center>
</div> <!-- /container -->
<div id="footer">
<div class="container">
<p class="muted credit">
<Center>542</Center>
</p>
</div>
</div>
</div>
<div id="sectionA" class="tab-pane fade">
<h3>GMT Military mode-s logs</h3>
<p><button class="btn btn-primary btn-responsive">All others</button></p>
<p><button class="btn btn-primary btn-responsive">North America</button></p>
<p><button class="btn btn-primary btn-responsive">Latin America</button></p>
</div>
<div id="sectionB" class="tab-pane fade">
<h3>Section B</h3>
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div id="dropdown1" class="tab-pane fade">
<h3>Dropdown 1</h3>
<p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis. Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p>
</div>
<div id="dropdown2" class="tab-pane fade">
<h3>Dropdown 2</h3>
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
</div>
</div><!-- /container -->
</body>
</html>
答案 0 :(得分：0)
您需要查看正常工作的链接
<a data-toggle="tab" href="#sectionA">
您只需在下拉菜单中添加相应的data-toggle属性即可。