我正在使用 javascript 在页面的自定义位置显示子菜单
- 错误是它没有显示子菜单
- 我已经使用设计的形式在 dis123 div 标签中显示它
- 当我只尝试脚本代码时它起作用了
- 当我在设计的页面中尝试时它不起作用
这里是完整的代码
代码
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Blueprint: Vertical Icon Menu</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/leftmenu.css" />
<link rel="stylesheet" type="text/css" href="flaticon.css" />
<style>
body {position: relative;font-family: 'Lato', Calibri, Arial, sans-serif; color: #47a3da;}
body, html { font-size: 100%; height: 100%; padding: 0; margin: 0;}
a {color:#f0f0f0;text-decoration: none;}
a:hover {color: #000;}
#header{height: 90px;width: 100%;background-color: #B9F5BB;}
#footer{height: 50px;width: 100%;background-color: #FDD5CB;}
.dis123{width:75%;float:left; height: 500px;background-color:#DCEEE3; text-align: left; }
.postleftmen{width:25%;float:left;}
</style>
</head>
<body>
<div id="header">
Head
</div>
<div class="postleftmen">
<ul class="cbp-vimenu">
<li><a href="#" class="">SELECT CATEGORY</a></p></li>
<li><p name="answer" value="Show Div" onclick="mob()" ><a href="#" class="flaticon-smart">MOBILE & TABLET</a></p></li>
<li><a href="#" class="flaticon-pc6">ELECTRONICS & COMPUTER</a></li>
<li><a href="#" class="flaticon-car95">Vehicles</a></li>
<li><a href="#" class="flaticon-livingroom6">Home & Furniture</a></li>
<li><a href="#" class="flaticon-pets3">Pets</a></li>
<li><a href="#" class="flaticon-cd">Books, CDs & Hobbies</a></li>
<li><a href="#" class="flaticon-black276">Clothing & Accessories</a></li>
<li><a href="#" class="flaticon-baby23">Kids & Baby</a></li>
<li><a href="#" class="flaticon-bicycle14">Sports & Health</a></li>
<li><a href="#" class="flaticon-tools6">Services</a></li>
<li><a href="#" class="flaticon-businessman221">Jobs</a></li>
<li><a href="#" class="flaticon-house111">Real Estate</a></li>
</ul>
</div>
<div class="dis123">
display<div id="mobi" style="display:none;z-index:99;" class="answer_list" > <a href="main.php">mobile</a><br><a href="#">tablet</a></div>
</div>
<div style="clear:both"> </div>
<div id="footer">
Footer
</div>
<script>
function mob() {
first();
document.getElementById('mobi').style.display = "block";
}
function ele() {
first();
document.getElementById('elec').style.display = "block";
}
function veh() {
first();
document.getElementById('vehi').style.display = "block";
}
function hme() {
first();
document.getElementById('home').style.display = "block";
}
function pet() {
first();
document.getElementById('pets').style.display = "block";
}
function boo() {
first();
document.getElementById('book').style.display = "block";
}
function first(){
document.getElementById('mobi').style.display = "none";
document.getElementById('elec').style.display = "none";
document.getElementById('vehi').style.display = "none";
document.getElementById('home').style.display = "none";
document.getElementById('pets').style.display = "none";
document.getElementById('book').style.display = "none";
}
</script>
</body>
</html>
以上是用 HTML、CSS、SCRIPT 显示页面的完整代码
任何人都可以帮助解决问题
我需要在里面显示以下内容
<div id="mobi" style="display:none;" class="answer_list" > <a href="main.php">mobile</a></div>
<div id="elec" style="display:none;" class="answer_list" > <a href="main.php">electric</a></div>
<div id="vehi" style="display:none;" class="answer_list" > <a href="main.php">vehicles</a></div>
<div id="home" style="display:none;" class="answer_list" > <a href="main.php">home</a></div>
<div id="pets" style="display:none;" class="answer_list" > <a href="main.php">pets</a></div>
<div id="book" style="display:none;" class="answer_list" > <a href="main.php">book</a></div>
最佳答案
关于javascript - 使用脚本在另一个div中显示子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25759239/