<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" culture="auto" meta:resourcekey="PageResource1" uiculture="auto" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>GZJiuying</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
</style>
<body>
<form id="form1" runat="server">
<div class="header">
Welcome to GZJiuying!<span class="span0">Email:<a href="mailto:gzjiuying@outlook.com">gzjiuying@outlook.com</a></span>
</div>
<div class="div0">
<img src="images/logo1.png" alt="logo" class="img_style0"/>
<ul class="nav_bar">
<li><a>Home page</a> </li>
<li><a>About us</a></li>
<li><a>Main products</a></li>
<li><a>Testimonials</a></li>
<li><a>Strength</a></li>
<li><a>Company news</a></li>
<li><a>Contact us</a></li>
</ul>
</div>
<div class="slideshow-container">
<div class="slide">
<img src="images/Aluminum foil tape25.jpg" height="300" alt="Image 1" style="width: 960px" />
</div>
<div class="slide">
<img src="images/bushing11.jpg" height="300" alt="Image 2" style="width: 960px" />
</div>
<div class="slide">
<img src="images/Graphtie sheet36.jpg" height="300" alt="Image 3" style="width: 960px" />
</div>
</div>
<div class="div0">
<div class="div1">
<ul class="ul_style2">
<li><a href="javascript: unfold_Click()">Insulation materials</a>
<ul class="ul_style3" id="u3">
<li><a>Polyimide tape/film</a></li>
<li><a>Insulation washer</a></li>
<li><a>Natural mica sheet</a></li>
<li><a>Red insulation gasket</a></li>
</ul>
</li>
<li><a>Thermal conductive materials</a></li>
<li><a>Hardware materials</a></li>
</ul>
</div>
<div class="div2"></div>
</div>
</form>
<script type="text/javascript">
const slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.remove('active');
if (i == index) {
slide.classList.add('active');
}
});
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
setInterval(nextSlide, 2200);
showSlide(currentSlide);
function unfold_Click()
{
var u3= document.getElementById("u3");
alert(u3.style.display);
if(u3.style.display=="none")
{
u3.style.display="block";
alert("11111111111111");
}
else if(u3.style.display=="block")
{
u3.style.display="none";
alert("wwwwwwwww");
}
}
</script>
</body>
</html>
在触发unfold_Click的时候 u3.style.display为空字符串所以两个条件都不满足,默认给u3 的display设置为none或者block就行了
在css里面设定了,u3对应的<ul> 已设定为 none
ul_style3里面 已经设定为none
@gzjiuying: u3.style.display 返回的内联 你在stlye 标签里面 写的 或者外部css 文件里写的 js获取不到的 所以上面那个兄弟说 u3.style.display 是空的
这样的 你 u3.style.display 才能获取到 不然 你一直获取的都是空字符串 走不了你的逻辑
u3.style.display = u3.style.display !== 'none' ? 'none' : 'block';
现在还有在搞webform的项目?基本这个都消失了。
学习下。安这样的 也运行不出来
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" culture="auto" meta:resourcekey="PageResource1" uiculture="auto" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>GZJiuying</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
</style>
<body>
<form id="form1" runat="server">
<div class="header">
Welcome to GZJiuying!<span class="span0">Email:<a href="mailto:gzjiuying@outlook.com">gzjiuying@outlook.com</a></span>
</div>
<div class="div0">
<img src="images/logo1.png" alt="logo" class="img_style0"/>
<ul class="nav_bar">
<li><a>Home page</a> </li>
<li><a>About us</a></li>
<li><a>Main products</a></li>
<li><a>Testimonials</a></li>
<li><a>Strength</a></li>
<li><a>Company news</a></li>
<li><a>Contact us</a></li>
</ul>
</div>
<div class="slideshow-container">
<div class="slide">
<img src="images/Aluminum foil tape25.jpg" height="300" alt="Image 1" style="width: 960px" />
</div>
<div class="slide">
<img src="images/bushing11.jpg" height="300" alt="Image 2" style="width: 960px" />
</div>
<div class="slide">
<img src="images/Graphtie sheet36.jpg" height="300" alt="Image 3" style="width: 960px" />
</div>
</div>
<div class="div0">
<div class="div1">
<ul class="ul_style2">
<li><a href="javascript: unfold_Click()">Insulation materials</a>
<ul class="ul_style3" id="u3" style="display:none">
<li><a>Polyimide tape/film</a></li>
<li><a>Insulation washer</a></li>
<li><a>Natural mica sheet</a></li>
<li><a>Red insulation gasket</a></li>
</ul>
</li>
<li><a href="javascript: unfold0_Click()">Thermal conductive materials</a>
<ul class="ul_style3" id="u4" style="display:none">
<li><a>Polyimide tape/film</a></li>
<li><a>Insulation washer</a></li>
<li><a>Natural mica sheet</a></li>
<li><a>Red insulation gasket</a></li>
</ul>
</li>
<li><a href="javascript: unfold1_Click()">Hardware materials</a>
<ul class="ul_style3" id="u5" style="display:none">
<li><a>Polyimide tape/film</a></li>
<li><a>Insulation washer</a></li>
<li><a>Natural mica sheet</a></li>
<li><a>Red insulation gasket</a></li>
</ul>
</li>
</ul>
</div>
<div class="div2"></div>
</div>
</form>
<script type="text/javascript">
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.remove('active');
if (i == index) {
slide.classList.add('active');
}
});
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
setInterval(nextSlide, 2200);
showSlide(currentSlide);
function unfold_Click()
{
alert("++++++++++++++");
var u3= document.getElementById("u3");
if(u3.style.display"none")
{
u3.style.display="block";
}
else if(u3.style.display"block")
{
u3.style.display="none";
}
function unfold0_Click()
{
alert("===========");
var u4= document.getElementById("u4");
if(u4.style.display"none")
{
u4.style.display="block";
}
else if(u4.style.display"block")
{
u4.style.display="none";
}
function unfold1_Click()
{
alert("00000000000000");
var u5= document.getElementById("u5");
if(u5.style.display"none")
{
u5.style.display="block";
}
else if(u5.style.display"block")
{
u5.style.display="none";
}
}
</script>
</body>
</html>
只能用一次
@gzjiuying: 你很倔强呀,非要用if还else if,你的2个状态不是全部,还有"",把else的if去了!
画蛇添足!!!
@张朋举: 去掉没事,不影响,关键是怎么只能使用一次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div class="div0"> <div class="div1"> <ul class="ul_style2"> <li><a href="javascript: unfold_Click()">Insulation materials</a> <ul class="ul_style3" id="u3" style="display:none"> <li><a>Polyimide tape/film</a></li> <li><a>Insulation washer</a></li> <li><a>Natural mica sheet</a></li> <li><a>Red insulation gasket</a></li> </ul> </li> <li><a>Thermal conductive materials</a></li> <li><a>Hardware materials</a></li> </ul> </div> <div class="div2"></div> </div> <script type="text/javascript"> const slides = document.querySelectorAll('.slide'); var currentSlide = 0; function showSlide(index) { slides.forEach((slide, i) => { slide.classList.remove('active'); if (i == index) { slide.classList.add('active'); } }); } function nextSlide() { currentSlide = (currentSlide + 1) % slides.length; showSlide(currentSlide); } setInterval(nextSlide, 2200); showSlide(currentSlide); function unfold_Click() { let u3 = document.getElementById("u3"); if (u3.style.display !== 'none') { u3.style.display = 'none'; } else { u3.style.display = 'block'; } } </script> </body> </html>
@张朋举: 另外两个子菜单 怎么?
还有个问题, 这段代码没问题吗?运行下
const slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.remove('active');
if (i == index) {
slide.classList.add('active');
}
});
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
setInterval(nextSlide, 2200);
showSlide(currentSlide);
@gzjiuying: 这不前段时间根据你写的 轮播切换优化后的代码吗 没有问题的