Javascript 第二个选项卡上的图片使div无法连接到正确的</部门>；结局。为什么？
我把HTML、CSS和Javascript代码都放在一个HTML文档中。代码给了我错误，因为它的结构无效。如何正确关闭所有元素并使其成为HTML5的有效元素。以下是我的文件的完整代码：Javascript 第二个选项卡上的图片使div无法连接到正确的</部门>；结局。为什么？,javascript,html,css,Javascript,Html,Css,我把HTML、CSS和Javascript代码都放在一个HTML文档中。代码给了我错误，因为它的结构无效。如何正确关闭所有元素并使其成为HTML5的有效元素。以下是我的文件的完整代码： <!DOCTYPE html> <body style="background-color:lightgrey;"> <head> <title>Empire Landscaping & hauling Inc.&l
<!DOCTYPE html>
<body style="background-color:lightgrey;">
<head>
<title>Empire Landscaping & hauling Inc.</title>
<header>
<h1>Empire landscaping & Hauling Inc.</h1>
<h3>2001 South M-291 Highway</h3>
<h3>Independence, Mo</h3>
</header>
<style type="text/css">
#tabs ul {
padding: 0px;
margin: 20px;
margin-left: 15px;
list-style-type: none;
}
#tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 30px;
}
#tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 29px;
padding-left: 10px;
background: #CC0000;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
width: 130px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
#tabs ul li a:hover {
text-decoration: underline;
}
#tabs #Content_Area {
padding: 0 15px;
clear:both;
overflow:visible;
line-height:19px;
position: relative;
top: 30px;
z-index: 5;
height: 200px;
overflow: visible;
}
p { padding-left: 10px; }
</style>
<script type="text/javascript">
function tab(tab) {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';
document.getElementById('tab3').style.display = 'none';
document.getElementById('tab4').style.display = 'none';
document.getElementById('li_tab1').setAttribute("class", "");
document.getElementById('li_tab2').setAttribute("class", "");
document.getElementById('li_tab3').setAttribute("class", "");
document.getElementById('li_tab4').setAttribute("class", "");
document.getElementById(tab).style.display = 'block';
document.getElementById('li_'+tab).setAttribute("class", "active");
}
</script>
</head>
<body>
<div
<div id="tabs">
<ul>
<li id="li_tab1" onclick="tab('tab1')"><a>Decorative Rock</a></li>
<li id="li_tab2" onclick="tab('tab2')"><a>Gravel</a></li>
<li id="li_tab3" onclick="tab('tab3')"><a>Mulch</a></li>
<li id="li_tab4" onclick="tab('tab4')"><a>Topsoil and Fill</a></li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p>Empire carries many types of decorative rock for your lawn care needs! </br>
We carry decorative rocks that will help style your yard and make it look wonderful.</br>
This is our Colorado River Rock, one of our most popular materials that we sell.</br>
This rock complements dark homes and surroundings.
</p>
<p> <img src="https://encrypted-tbn3.gstatic.com/images? q=tbn:ANd9GcQSAFchzIyxH2UJjno-aIekETSFJr-wko1wdWsxeAZInv8VDq1g" style="width:250px;height:270px;"/></p>
Next is our Ozark River Rock. This type of rock can add a gentle warmth to your yard.</br>
Ozark has a rich, warm color and because of this red is always a winning combination.</p>
<p> <img src="http://iowalandscapesupply.com/wp- content/uploads/2012/10/pink-granite.jpg" style="width:250px;height:270px;"/> </p>
<p>A special type of rock that we have is the Lava Rock.</br>
We carry this rock in the color of red and various shades of black, so it complements light homes and surroundings.
</p>
<p> <img src="http://www.hollowtrucking.com/images/exotic_landscaping_stones/Red_Lava_Rock.jpg" style="width:250px;height:270px;"/></p>
</div>
<div id="tab2">
We carry limestone gravel in several different sizes. We also carry dust and crusher run.</br></p>
</div>
</body>
</html>
帝国园林绿化运输公司。
帝国园林绿化运输公司。
2001南M-291公路
独立，莫
#标签ul{
填充：0px；
利润率：20px；
左边距：15px；
列表样式类型：无；
}
#李国宝{
显示：内联块；
明确：无；
浮动：左；
高度：30px；
}
#李安{
位置：相对位置；
边缘顶部：16px；
显示：块；
左边距：6px；
线高：29px；
左侧填充：10px；
背景：#CC0000；
z指数：9999；
边框：1px实心#ccc；
边框底部：0px；
-左上角moz边界半径：4px；
边框左上半径：4px；
-moz边框半径右上角：4px；
边框右上角半径：4px；
宽度：130px；
颜色：#FFFFFF；
文字装饰：无；
字体大小：粗体；
}
#李娜：悬停{
文字装饰：下划线；
}
#选项卡#内容_区域{
填充：0 15px；
明确：两者皆有；
溢出：可见；
线高：19px；
位置：相对位置；
顶部：30px；
z指数：5；
高度：200px；
溢出：可见；
}
p{左填充：10px；}
功能选项卡（选项卡）{
document.getElementById（'tab1'）.style.display='none'；
document.getElementById（'tab2'）.style.display='none'；
document.getElementById（'tab3'）。style.display='none'；
document.getElementById（'tab4'）。style.display='none'；
document.getElementById（'li_tab1'）.setAttribute（'class'，'）；
document.getElementById（'li_tab2'）.setAttribute（'class'，“”）；
document.getElementById（'li_tab3'）.setAttribute（'class'，'）；
document.getElementById（'li_tab4'）.setAttribute（'class'，“”）；
document.getElementById（tab.style.display='block'；
document.getElementById（'li_'+tab）.setAttribute（“class”，“active”）；
}
开始div未在主体第一div下关闭
<body>
<div
<div id="tabs">
您的整个HTML代码结构无效，我将重新构造，这应该可以解决您的问题
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#tabs ul {
padding: 0px;
margin: 20px;
margin-left: 15px;
list-style-type: none;
}
#tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 30px;
}
#tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 29px;
padding-left: 10px;
background: #CC0000;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
width: 130px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
#tabs ul li a:hover {
text-decoration: underline;
}
#tabs #Content_Area {
padding: 0 15px;
clear:both;
overflow:visible;
line-height:19px;
position: relative;
top: 30px;
z-index: 5;
height: 200px;
overflow: visible;
}
p { padding-left: 10px; }
</style>
<title>Empire Landscaping & hauling Inc.</title>
</head>
<body style="background-color:lightgrey;">
<header>
<h1>Empire landscaping & Hauling Inc.</h1>
<h3>2001 South M-291 Highway</h3>
<h3>Independence, Mo</h3>
</header>
<script type="text/javascript">
function tab(tab) {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';
document.getElementById('tab3').style.display = 'none';
document.getElementById('tab4').style.display = 'none';
document.getElementById('li_tab1').setAttribute("class", "");
document.getElementById('li_tab2').setAttribute("class", "");
document.getElementById('li_tab3').setAttribute("class", "");
document.getElementById('li_tab4').setAttribute("class", "");
document.getElementById(tab).style.display = 'block';
document.getElementById('li_'+tab).setAttribute("class", "active");
}
</script>
<div id="tabs">
<ul>
<li id="li_tab1" onclick="tab('tab1')"><a>Decorative Rock</a></li>
<li id="li_tab2" onclick="tab('tab2')"><a>Gravel</a></li>
<li id="li_tab3" onclick="tab('tab3')"><a>Mulch</a></li>
<li id="li_tab4" onclick="tab('tab4')"><a>Topsoil and Fill</a></li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p>Empire carries many types of decorative rock for your lawn care needs! <br/>
We carry decorative rocks that will help style your yard and make it look wonderful.<br/>
This is our Colorado River Rock, one of our most popular materials that we sell.<br/>
This rock complements dark homes and surroundings.
</p>
<p> <img src="https://encrypted-tbn3.gstatic.com/images? q=tbn:ANd9GcQSAFchzIyxH2UJjno-aIekETSFJr-wko1wdWsxeAZInv8VDq1g" style="width:250px;height:270px;"/></p>
<p>
Next is our Ozark River Rock. This type of rock can add a gentle warmth to your yard.<br/>
Ozark has a rich, warm color and because of this red is always a winning combination.
</p>
<p> <img src="http://iowalandscapesupply.com/wp- content/uploads/2012/10/pink-granite.jpg" style="width:250px;height:270px;"/> </p>
<p>A special type of rock that we have is the Lava Rock.<br/>
We carry this rock in the color of red and various shades of black, so it complements light homes and surroundings.
</p>
<p> <img src="http://www.hollowtrucking.com/images/exotic_landscaping_stones/Red_Lava_Rock.jpg" style="width:250px;height:270px;"/></p>
</div>
<div id="tab2">
<p>We carry limestone gravel in several different sizes. We also carry dust and crusher run.<br/></p>
</div>
this is the first tab i can add pictures here and it doesn't affect anything
The kind of Mulch that we carry is fine shredded. We have several different colors.
Our topsoil is pulverized with compost, along with our fill dirt which is chunky, and sandy.
</div>
</div>
</body>
</html>
#标签ul{
填充：0px；
利润率：20px；
左边距：15px；
列表样式类型：无；
}
#李国宝{
显示：内联块；
明确：无；
浮动：左；
高度：30px；
}
#李安{
位置：相对位置；
边缘顶部：16px；
显示：块；
左边距：6px；
线高：29px；
左侧填充：10px；
背景：#CC0000；
z指数：9999；
边框：1px实心#ccc；
边框底部：0px；
-左上角moz边界半径：4px；
边框左上半径：4px；
-moz边框半径右上角：4px；
边框右上角半径：4px；
宽度：130px；
颜色：#FFFFFF；
文字装饰：无；
字体大小：粗体；
}
#李娜：悬停{
文字装饰：下划线；
}
#选项卡#内容_区域{
填充：0 15px；
明确：两者皆有；
溢出：可见；
线高：19px；
位置：相对位置；
顶部：30px；
z指数：5；
高度：200px；
溢出：可见；
}
p{左填充：10px；}
帝国园林绿化运输公司。
帝国园林绿化运输公司。
2001南M-291公路
独立，莫
功能选项卡（选项卡）{
document.getElementById（'tab1'）.style.display='none'；
document.getElementById（'tab2'）.style.display='none'；
document.getElementById（'tab3'）。style.display='none'；
document.getElementById（'tab4'）。style.display='none'；
document.getElementById（'li_tab1'）.setAttribute（'class'，'）；
document.getElementById（'li_tab2'）.setAttribute（'class'，“”）；
document.getElementById（'li_tab3'）.setAttribute（'class'，'）；
document.getElementById（'li_tab4'）.setAttribute（'class'，“”）；
document.getElementById（tab.style.display='block'；
document.getElementById（'li_'+tab）.setAttribute（“class”，“active”）；
}
装饰石
砾石
覆盖物
表土和填料
帝国携带多种类型的装饰岩石，满足您的草坪护理需求
我们提供装饰性岩石，有助于打造您的庭院风格，让它看起来更漂亮。
这是我们的科罗拉多河岩石，我们销售的最受欢迎的材料之一。
这块石头与黑暗的房屋和周围环境相得益彰。
接下来是我们的奥扎克河岩石。这种类型的r
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#tabs ul {
padding: 0px;
margin: 20px;
margin-left: 15px;
list-style-type: none;
}
#tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 30px;
}
#tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 29px;
padding-left: 10px;
background: #CC0000;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
width: 130px;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}
#tabs ul li a:hover {
text-decoration: underline;
}
#tabs #Content_Area {
padding: 0 15px;
clear:both;
overflow:visible;
line-height:19px;
position: relative;
top: 30px;
z-index: 5;
height: 200px;
overflow: visible;
}
p { padding-left: 10px; }
</style>
<title>Empire Landscaping & hauling Inc.</title>
</head>
<body style="background-color:lightgrey;">
<header>
<h1>Empire landscaping & Hauling Inc.</h1>
<h3>2001 South M-291 Highway</h3>
<h3>Independence, Mo</h3>
</header>
<script type="text/javascript">
function tab(tab) {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';
document.getElementById('tab3').style.display = 'none';
document.getElementById('tab4').style.display = 'none';
document.getElementById('li_tab1').setAttribute("class", "");
document.getElementById('li_tab2').setAttribute("class", "");
document.getElementById('li_tab3').setAttribute("class", "");
document.getElementById('li_tab4').setAttribute("class", "");
document.getElementById(tab).style.display = 'block';
document.getElementById('li_'+tab).setAttribute("class", "active");
}
</script>
<div id="tabs">
<ul>
<li id="li_tab1" onclick="tab('tab1')"><a>Decorative Rock</a></li>
<li id="li_tab2" onclick="tab('tab2')"><a>Gravel</a></li>
<li id="li_tab3" onclick="tab('tab3')"><a>Mulch</a></li>
<li id="li_tab4" onclick="tab('tab4')"><a>Topsoil and Fill</a></li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p>Empire carries many types of decorative rock for your lawn care needs! <br/>
We carry decorative rocks that will help style your yard and make it look wonderful.<br/>
This is our Colorado River Rock, one of our most popular materials that we sell.<br/>
This rock complements dark homes and surroundings.
</p>
<p> <img src="https://encrypted-tbn3.gstatic.com/images? q=tbn:ANd9GcQSAFchzIyxH2UJjno-aIekETSFJr-wko1wdWsxeAZInv8VDq1g" style="width:250px;height:270px;"/></p>
<p>
Next is our Ozark River Rock. This type of rock can add a gentle warmth to your yard.<br/>
Ozark has a rich, warm color and because of this red is always a winning combination.
</p>
<p> <img src="http://iowalandscapesupply.com/wp- content/uploads/2012/10/pink-granite.jpg" style="width:250px;height:270px;"/> </p>
<p>A special type of rock that we have is the Lava Rock.<br/>
We carry this rock in the color of red and various shades of black, so it complements light homes and surroundings.
</p>
<p> <img src="http://www.hollowtrucking.com/images/exotic_landscaping_stones/Red_Lava_Rock.jpg" style="width:250px;height:270px;"/></p>
</div>
<div id="tab2">
<p>We carry limestone gravel in several different sizes. We also carry dust and crusher run.<br/></p>
</div>
this is the first tab i can add pictures here and it doesn't affect anything
The kind of Mulch that we carry is fine shredded. We have several different colors.
Our topsoil is pulverized with compost, along with our fill dirt which is chunky, and sandy.
</div>
</div>
</body>
</html>