根据以下代码，默认情况下，主页选项卡显示为空白。点击产品订购标签后，内容将显示在下方。我用Javascript编写了这段代码。但是，当我试图将这些转换为引导程序时，我正在努力创造这个。 有人可以帮忙解决这个问题吗？
<!DOCTYPE>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<link type="text/css" rel="stylesheet" media="all" href="images/style.css" />-->
<style>
.wrapper {
margin: 0px auto 0px auto;
padding: 3px 0px 0px 0px;
width: 100%;
}
.container{
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
width: 900px;
height: 500px;
background-color: white;
border: 1px solid green;
}
.clear{
clear: both;
}
.menu_container{
margin: 0px;
padding: 0px;
width: 900px;
}
.middle_container{
margin:0px;
padding:0px;
width: 900px;
}
.middle_container_left{
margin:0px;
padding:0px;
width: 300px;
height: 246px;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
float:left;
}
.middle_container_right{
margin:0px 0px 0px 10px;
padding:0px;
width: 580px;
height: 300px;
/*border: 1px solid black;*/
float:left;
}
.menu_font{
margin: 0px 5px 0px 0px;
width: 100px;
height:30px;
float:left;cursor:hand;
text-align:center;
padding-top:5px;
font-weight:bold;
background-color: #8eaf64;
border-radius:5px 5px 0 0;
color: white;
}
.menu_font:hover{
margin: 0px 5px 0px 0px;
width: 100px;
height:30px;
float:left;cursor:hand;
text-align:center;
padding-top:5px;
font-weight:bold;
color: white;
background-color:#64A70B !important;
border-radius:5px 5px 0 0;
}
.onoffswitch {
position: relative; width: 63px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 6px;
background-color: #85a857; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 2px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 30px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: -4px;
bottom: 0;
right: 26px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: -5px;
}
.green{
color: green;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
function show_menu(elementId) {
document.getElementById("home").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById(elementId).style.display="block";
}
function show_left_menu(elementId) {
document.getElementById("quick_add").style.display="none";
document.getElementById("solution_builder").style.display="none";
document.getElementById("bulk_load").style.display="none";
document.getElementById("product_search").style.display="none";
document.getElementById("saved_cart").style.display="none";
document.getElementById("view_favorites").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
</head>
<body>
<div class="wrapper">
<div class="container">
<h2 align="center">Demo</h2>
<div class="menu_container">
<div class="menu_font" onclick="show_menu('home');">Home</div>
<div class="menu_font" onclick="show_menu('id2');">Product Ordering</div>
<div class="clear"></div>
</div>
<div class="middle_container">
<div id="home" style="height: 300px;"></div>
</div>
<div class="middle_container" id="id2" style="display:none">
<div class="middle_container_left">
<ul style="list-style-type: none;margin:0px;padding:0px;">
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('quick_add');">Quick Add</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('solution_builder');">Solution Builder</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('bulk_load');">Bulk Load</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('product_search');">Product Search</li>
<li style="padding:10px;height:20px;border-bottom: 1px solid black;" onclick="show_left_menu('saved_cart');">Saved Cart</li>
<li style="padding:10px;height:20px;" onclick="show_left_menu('view_favorites');">View Favorites</li>
</ul>
</div>
<div class="middle_container_right" id="quick_add">
<h2>Quick Add:</h2>
<table cellpadding="0" cellspacing="0" style="width: 300px;">
<tr>
<td>Item Name:</td>
<td>
<input list="product_name" name="item_name">
<datalist id="product_name">
<option value="112-800-00000">
<option value="112-700-00000">
<option value="700-800-00000">
<option value="100-800-00000">
<option value="900-800-00000">
<option value="600-800-00000">
<option value="08000BK07045">
<option value="08000BK04045">
<option value="08000BK06045">
</datalist>
</td>
</tr>
<tr>
<td colspan="2">
<div class="row col-xs-12 col-sm-12 ">
<div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div>
<div class="onoffswitch dispinline ">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td>Quantity:</td>
<td><input type="textbox" name="Quantity"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
</table>
</div>
<div class="middle_container_right" id="solution_builder" style="display:none;">solution builder content</div>
<div class="middle_container_right" id="bulk_load" style="display:none;">Bulk Load content</div>
<div class="middle_container_right" id="product_search" style="display:none;">Product Search content</div>
<div class="middle_container_right" id="saved_cart" style="display:none;">Saved cart content</div>
<div class="middle_container_right" id="view_favorites" style="display:none;">View Favorites content</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
我的引导代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
.nav-tabs { border-bottom: 2px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs > li > a { border: none; color: #666; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
.nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}
.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }
body{ background: #EDECEC; padding:50px}
</style>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<!--<div class="container-fluid text-center"> -->
<div class="container">
<div class="row content">
<div class="col-sm-2 sidenav" style="border: 1px solid red;">
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-8 text-left">
<h1 style="text-align: center;">DEMO</h1>
<div class="row">
<div class="col-md-6" style="border: 1px solid red;width:100%;">
<!-- Nav tabs --><div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<!--<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>-->
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home"></div>
<div role="tabpanel" class="tab-pane" id="profile"><h2>Quick Add:</h2>
<table cellpadding="0" cellspacing="0" style="border: 1px solid red;">
<tr>
<td>Item Name:</td>
<td>
<!--<input list="product_name" name="item_name">
<datalist id="product_name">
<option value="112-800-00000">
<option value="112-700-00000">
<option value="700-800-00000">
<option value="100-800-00000">
<option value="900-800-00000">
<option value="600-800-00000">
<option value="08000BK07045">
<option value="08000BK04045">
<option value="08000BK06045">
</datalist>-->
<div class="col-sm-10">
<input class="form-control" type="text" id="sm">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="row col-xs-12 col-sm-12 ">
<div class=" dispinline col-sm-offset-5 col-xs-offset-1 col-xs-4 col-sm-2 searchlabel">Enable Search </div>
<!--<div class="onoffswitch dispinline ">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>-->
<input type="checkbox" checked data-toggle="toggle">
</div>
</td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td>Quantity:</td>
<td><input type="textbox" name="Quantity"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
<tr>
<td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td>
</tr>
<tr><td style="height: 10px;"></td></tr>
</table>
</div>
<!--<div role="tabpanel" class="tab-pane" id="messages"></div>
<div role="tabpanel" class="tab-pane" id="settings"></div>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
答案 0 :(得分：0)
甚至不确定从哪里开始。但是出现意外显示结果的一个主要原因可能是<{1}} 之后你的嵌入式样式，所以默认的bootstrap CSS会覆盖你的自定义样式，我假设它与你正在尝试的相反要做。
答案 1 :(得分：-1)
我不知道你在说什么，但你可以逐行手动将其转换为兼容的单独语言，我确定有更好的方法来做到这一点，但我个人就是这样做的。