使用脚本在另一个div中显示子菜单 [英] display sub menu in another div using script
本文介绍了使用脚本在另一个div中显示子菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用javascript在页面的自定义位置显示子菜单
- 错误是它不显示子菜单
- 当我仅尝试使用脚本代码时，我用设计的表单将其显示在dis123 div标签中
- 尝试在设计的页面，它不工作
这里是完整的代码
CODE
<！DOCTYPE html>
< html lang =enclass =no-js>
< head>
< meta charset =UTF-8/>
< title>蓝图：垂直图标菜单< / title>
< link rel =快捷图标href =../ favicon.ico>
< link rel =stylesheettype =text / csshref =css / leftmenu.css/>
< link rel =stylesheettype =text / csshref =flaticon.css/>
< style>
body {position：relative; font-family：'Lato'，Calibri，Arial，sans-serif;颜色：＃47a3da;}
body，html {font-size：100％;身高：100％;填充：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>
目标
< / div>
< div class =postleftmen>
< ul class =cbp-vimenu>
< li>< a href =＃class => SELECT CATEGORY< / a>< / p>< / li>
< li>< p name =answervalue =Show Divonclick =mob（）>< a href =＃class =flaticon-smart> MOBILE& NBSP;&安培;&安培; NBSP; TABLET< / A>< / p>< /锂>
< a href =＃class =flaticon-pc6> ELECTRONICS& nbsp;&& nbsp; COMPUTER< / a>< / li>
< li>< a href =＃class =flaticon-car95>车辆< / a>< / li>
< li>< a href =＃class =flaticon-livingroom6>家庭&&& nbsp;家具< / a>< / li>
< li>< a href =＃class =flaticon-pets3> Pets< / a>< / li>
< a>< a href =＃class =flaticon-cd>书籍& nbsp; CD& nbsp;& nbsp;爱好< / a>< / li> ;
< li>< a href =＃class =flaticon-black276>服饰&& nbsp;配饰< / a>< / li>
< li>< a href =＃class =flaticon-baby23> Kids& nbsp;& nbsp;宝宝< / a>< / li>
< li>< a href =＃class =flaticon-bicycle14>运动& nbsp;&& nbsp;运动< / a>< / li>
< li>< a href =＃class =flaticon-tools6>服务< / a>< / li>
< li>< a href =＃class =flaticon-businessman221>乔布斯< / a>< / li>
< li>< a href =＃class =flaticon-house111> Real& nbsp; Estate< / a>< / li>
< / ul>
< / div>
< div class =dis123>
display< div id =mobistyle =display：none; z-index：99; class =answer_list> < a href =main.php> mobile< / a>< br>< a href =＃>平板电脑< / a>< / div>
< / div>
< div style =clear：both> < / DIV>
< div id =footer>
页脚
< / div>
< script>
函数mob（）{
first（）;
document.getElementById（'mobi'）。style.display =block;
}
函数ele（）{
first（）;
document.getElementById（'elec'）。style.display =block;
}
函数veh（）{
first（）;
document.getElementById（'vehi'）。style.display =block;
函数hme（）{
first（）;
document.getElementById（'home'）。style.display =block;
函数pet（）{
first（）;
document.getElementById（'pets'）。style.display =block;
}
函数boo（）{
first（）;
document.getElementById（'book'）。style.display =block;
}
函数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显示页面的完整代码
任何人都可以帮助什么是错误的
我需要在
中显示以下内容
$ b $ $ $ $ $ $ $ $ $ $ $ $< div id =mobistyle =display：none; class =answer_list> < a href =main.php>手机< / a>< / div>
< div id =elecstyle =display：none; class =answer_list> < a href =main.php>电动< / a>< / div>
< div id =vehistyle =display：none; class =answer_list> < a href =main.php>车辆< / a>< / div>
< div id =homestyle =display：none; class =answer_list> < a href =main.php>主页< / a>< / div>
< div id =petsstyle =display：none; class =answer_list> < a href =main.php>宠物< / a>< / div>
< div id =bookstyle =display：none; class =answer_list> < a href =main.php> book< / a>< / div>
解决方案
首先， onclick =mob（）
我建议这个
onclick =mob（）;
并且将脚本放在头部然后调用它
am using javascript to display sub menu in custom location in page
- the error is its not displaying sub menu
- i have used designed form to display it in dis123 div tag
- when i try only script code it works
- when i try in designed page it does't work
here is the full code
CODE
<!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>
above is the full code that display the page with HTML,CSS, SCRIPT
can anyone help whats wrong
i need to display the following inside
<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>
解决方案
Here is The Fiddle with your example
first of all
onclick="mob()"
I suggest this
onclick="mob();"
and also put your script to the head then call it
这篇关于使用脚本在另一个div中显示子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
