Use pure JS to achieve the secondary menu effect
|
This article example shares the specific code of JS to achieve the secondary menu effect for your reference. The specific content is as follows js clicks on the secondary menu, clicks on the secondary menu and changes the main menu to the secondary menu Click to display the secondary menu
<style>
*{
margin:0px auto;
padding:0px;
}
.yiji{
width:200px;
height:40px;
background-color:red;
color:#fff;
text-align:center;
line-height:40px;h
vertical-align:middle;
border:1px solid #FFF;
}
.erji1{
width:200px;
height:40px;
background-color:#F63;
color:#fff;
text-align:center;
line-height:40px;
vertical-align:middle;
border:1px solid #FFF;
}
#erji2{
display:none;
}
#erji3{
display:none;
}
#erji4{
display:none;
}
</style>
</head>
<body>
<div class="yiji" onclick="Show('erji2')">Home</div>
<div id="erji2">
<div class="erji1">1</div>
<div class="erji1">1</div>
<div class="erji1">1</div>
</div>
<div class="yiji" onclick="Show('erji3')">Talent</div>
<div id="erji3">
<div class="erji1">1</div>
<div class="erji1">1</div>
<div class="erji1">1</div>
</div>
<div class="yiji" onclick="Show('erji4')">Market</div>
<div id="erji4">
<div class="erji1">1</div>
<div class="erji1">1</div>
<div class="erji1">1</div>
</div>
</body>
<script type="text/javascript">
function Show(a)
{
var a = document.getElementById(a);
if(a.style.display == "block")
{
a.style.display = "none";
}
else
{
a.style.display = "block";
}
}
</script>
#caidan{
width:200px;
height:40px;
border:1px solid #999;
text-align:center;
line-height:40px;
vertical-align:middle;
}
.list{
width:200px;
height:40px;
border:1px solid #999;
border-top-width:0px;
text-align:center;
line-height:40px;
vertical-align:middle;
display:none;
}
#caidan,.list:hover{
cursor:pointer;
}
.list:hover{
background-color:#63F;
}<div style="width:200px; height:400px;"> <div id="caidan" onclick="Show()">China</div> <div class="list" onclick="Xuan(this)">Shandong</div> <div class="list" onclick="Xuan(this)">Jinan</div> <div class="list" onclick="Xuan(this)">Jining</div> <div class="list" onclick="Xuan(this)">Weihai</div> <div class="list" onclick="Xuan(this)">Zibo</div> </div>
function Show()
{
var list = document.getElementsByClassName("list");
//Display list for(var i=0;i<list.length;i++)
{
list[i].style.display = "block";
}
}
function Xuan(a)
{
var c = document.getElementById("caidan");
c.innerHTML = a.innerHTML;
var list = document.getElementsByClassName("list");
//Display list for(var i=0;i<list.length;i++)
{
list[i].style.display = "none";
}
}
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: VMware workstation 12 install Ubuntu 14.04 (64 bit)
>>: JDBC Exploration SQLException Analysis
Recommend
When a Linux (Ubuntu) user enters an incorrect password N times in a row to log in, the system will be automatically locked for X minutes
1. Edit the PAM configuration file sudo vim /etc/...
Detailed explanation of various loop speed tests in JS that you don’t know
Table of contents Preface 1. for loop 2. while lo...
Operations of communication between Docker containers and external network communication
Communication between containers 1. Network shari...
Optimization methods when Mysql occupies too high CPU (must read)
When Mysql occupies too much CPU, where should we...
Deploy Nginx+Flask+Mongo application using Docker
Nginx is used as the server, Mongo is used as the...
Vue implements simple calculator function
This article example shares the specific code of ...
Win10 uses Tsinghua source to quickly install pytorch-GPU version (recommended)
Check whether your cuda is installed Type in the ...
How to build YUM in Centos7 environment
1. Enter the configuration file of the yum source...
Problems with configuring https server and reverse proxy with Nginx under Windows
Request logic Front-end --> Request nginx via ...
Using js to realize dynamic background
This article example shares the specific code of ...
MySQL Index Optimization Explained
In daily work, we sometimes run slow queries to r...
JavaScript to achieve magnifying glass effect
This article shares the specific code for JavaScr...
A screenshot demo based on canvas in html
Written at the beginning I remember seeing a shar...
Vue two fields joint verification to achieve the password modification function
Table of contents 1. Introduction 2. Solution Imp...