Jquery 代码错误：正文未关闭，菜单宽度超过100%_Jquery_Html_Css_Tags_Width

Jquery 代码错误：正文未关闭，菜单宽度超过100%

jquery html css tags

Jquery 代码错误：正文未关闭，菜单宽度超过100%,jquery,html,css,tags,width,Jquery,Html,Css,Tags,Width,我有两个问题与我的网站工作。Web Expression 4中的/body标记似乎有错误，我似乎无法找到原因。另外，菜单的宽度覆盖了页面的其余部分，而页面的其余部分不应水平滚动。所有部门看起来都关门了，这让我抓狂，我希望你能帮我！以下是html： <body> <div class="parallax"> <div id="menu"> <ul> <script>

我有两个问题与我的网站工作。Web Expression 4中的/body标记似乎有错误，我似乎无法找到原因。另外，菜单的宽度覆盖了页面的其余部分，而页面的其余部分不应水平滚动。所有部门看起来都关门了，这让我抓狂，我希望你能帮我！以下是html：

<body>
   <div class="parallax"> 
      <div id="menu">
         <ul>
            <script>
               $('#menu li')
               .mouseover(function() {
               $(this).addClass('animated flash');})
               .mouseout(function() {
                  $(this).removeClass('animated flash');
                });
            </script> 
            <li><a class="active" href="#home">Home</a></li>
            <li><a id="newsmenu" href="#news">Rooms</a></li>
            <li><a href="#news">Mariepskop</a></li>
            <li><a href="#news">Hoedspruit</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
         </ul>
      </div>
      <script>
           $( function() {
           $( ".datepicker" ).datepicker();
            });
      </script>
      <div class="date">
         <p>Arrival:<a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a>   
          <input type="text"class="datepicker"></p>
          <p></p>
          <p>Departure:&nbsp&nbsp <input type="text" class="datepicker"></p>
          <p><button class="button1">CHECK AVAILABILITY</button></p>
          <script> $('.button1')
              .mouseover(function() {
                   $(this).addClass('animated pulse');})
                   .mouseout(function(){
                       $(this).removeClass('animated pulse');});
          </script>
      </div>
</div>

<div class="parallax2">
<div class="slideshow-container">

<div class="mySlides fade">
<div class="numbertext">1 / 10</div>
<img src="images/gallery/intro1.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 10</div>
<img src="images/gallery/intro2.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 10</div>
<img src="images/gallery/intro3.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">4 / 10</div>
<img src="images/gallery/intro4.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">5 / 10</div>
<img src="images/gallery/intro5.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">6 / 10</div>
<img src="images/gallery/intro6.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">7 / 10</div>
<img src="images/gallery/intro7.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">8 / 10</div>
<img src="images/gallery/intro8.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">9 / 10</div>
<img src="images/gallery/intro9.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">10 / 10</div>
<img src="images/gallery/intro10.jpg" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>
<br></br>

<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span> 
<span class="dot" onclick="currentSlide(4)"></span> 
<span class="dot" onclick="currentSlide(5)"></span> 
<span class="dot" onclick="currentSlide(6)"></span> 
<span class="dot" onclick="currentSlide(7)"></span> 
<span class="dot" onclick="currentSlide(8)"></span> 
<span class="dot" onclick="currentSlide(9)"></span> 
<span class="dot" onclick="currentSlide(10)"></span> 

</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}    
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";  
}
for (i = 0; i < dots.length; i++) {
  dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";  
dots[slideIndex-1].className += " active";
}
</script>
<div class="textcontainer">
<p>
<center>
<span class="hot">WELCOME TO MARIEPSKOP VIEW CHALETS</span>
</center> </p>`
<p><center><span class="basictext">Located between the famous 
<span class="basiceffect">Blyde River Canyon</span> and the 
<span class="basiceffect">Kruger National Park(Orpen Gate)</span>,
<p>our lodge offers the best situation in the region. 
Halfway from all the  activites around, </p>
<p>experience the very best of South Africa and relax in our 
cosy  rooms</p>   </span></center></p>
</div>                      
<div class=map>
/* Theres a IFRAME tag here with google map styled width 100% border:0 and frameborder:0 but I cant add the four saces before it so I deleted it from here */

   <div class="parallax"></div>
   </body>

编辑： /车身问题现在看来已经解决了，但菜单宽度仍然存在问题：

由于缺少两个收尾div，请尝试更正后的html：

更新了菜单问题的波纹管样式：

.textcontainer {
    width:94%;
    padding:3%;
    overflow:hidden;
}

更新小提琴



$（“#菜单里”）
.mouseover（函数（）{
$（this.addClass（'animated flash'）；}）
.mouseout（函数（）{
$（this.removeClass（'animated flash'）；}）；







$（函数（）{
$（“.datepicker”）.datepicker（）；
} );
抵达：


出发时间：
检查可用性
$（“.button1”）
.mouseover（函数（）{
$（this.addClass（'animated pulse'）；}）
.mouseout（函数（）{
$（this.removeClass（'animated pulse'）；}）；
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10
❮
❯



var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i`
位于著名的
布莱德河峡谷和
克鲁格国家公园（奥本门），
我们的旅馆提供该地区最好的住宿条件。
在所有活动的中途
体验南非最棒的地方，在我们的
舒适的房间

/*这里有一个IFRAME标签，谷歌地图样式宽度100%边框：0和frameborder:0，但我不能在它前面添加四个SACE，所以我从这里删除了它*/

由于缺少两个收尾div，请尝试更正后的html：

更新了菜单问题的波纹管样式：

.textcontainer {
    width:94%;
    padding:3%;
    overflow:hidden;
}

更新小提琴



$（“#菜单里”）
.mouseover（函数（）{
$（this.addClass（'animated flash'）；}）
.mouseout（函数（）{
$（this.removeClass（'animated flash'）；}）；







$（函数（）{
$（“.datepicker”）.datepicker（）；
} );
抵达：


出发时间：
检查可用性
$（“.button1”）
.mouseover（函数（）{
$（this.addClass（'animated pulse'）；}）
.mouseout（函数（）{
$（this.removeClass（'animated pulse'）；}）；
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10
❮
❯



var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i`
位于著名的
布莱德河峡谷和
克鲁格国家公园（奥本门），
我们的旅馆提供该地区最好的住宿条件。
在所有活动的中途
体验南非最棒的地方，在我们的
舒适的房间

/*这里有一个IFRAME标签，谷歌地图样式宽度100%边框：0和frameborder:0，但我不能在它前面添加四个SACE，所以我从这里删除了它*/

看起来它纠正了/body标记错误，即使您在第二个“视差”div结束后关闭了“map”div，这不是我想要的，但我更改了它。非常感谢你！现在只需修改菜单宽度，就可以制作JSFIDLE了。因此，我可以检查并更正我提供的任何实时url，在那里我可以检查并建议您解决方案第一次我制作一个解决方案，如果您需要我添加图片和内容，请告诉我。我的第一篇帖子中有一张图片（问题本身）我刚刚编辑了它。看起来它更正了/body标记错误，即使您关闭了“地图”在第二个视差div之后的最后一个div不是我想要的，但是我改变了它。非常感谢你！现在只需修改菜单宽度，就可以制作JSFIDLE了。因此，我可以检查它并更正它。我可以提供任何实时url，在那里我可以检查它并建议您解决方案。第一次我制作一个解决方案，如果您需要我添加图片和内容，请告诉我。在我的第一篇帖子中有一张图片（问题本身），我刚刚编辑了它

<body>
<div class="parallax">


<div id="menu">

<ul><script>
$('#menu li')
.mouseover(function() {
$(this).addClass('animated flash');})
.mouseout(function(){
$(this).removeClass('animated flash');});
</script>

<li><a class="active" href="#home">Home</a></li>
<li><a id="newsmenu" href="#news">Rooms</a></li>
<li><a href="#news">Mariepskop</a></li>
<li><a href="#news">Hoedspruit</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<script>
$( function() {
$( ".datepicker" ).datepicker();
} );
</script>
<div class="date">
<p>Arrival:<a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>   
<input type="text"class="datepicker"></p>
<p></p>
<p>Departure:&nbsp;&nbsp; <input type="text" class="datepicker"></p>
<p><button class="button1">CHECK AVAILABILITY</button></p>
<script> $('.button1')
.mouseover(function() {
$(this).addClass('animated pulse');})
.mouseout(function(){
$(this).removeClass('animated pulse');});
</script>

</div>
</div>

<div class="parallax2">
<div class="slideshow-container">

<div class="mySlides fade">
<div class="numbertext">1 / 10</div>
<img src="images/gallery/intro1.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 10</div>
<img src="images/gallery/intro2.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 10</div>
<img src="images/gallery/intro3.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">4 / 10</div>
<img src="images/gallery/intro4.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">5 / 10</div>
<img src="images/gallery/intro5.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">6 / 10</div>
<img src="images/gallery/intro6.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">7 / 10</div>
<img src="images/gallery/intro7.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">8 / 10</div>
<img src="images/gallery/intro8.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">9 / 10</div>
<img src="images/gallery/intro9.jpg" style="width:100%">
</div>

<div class="mySlides fade">
<div class="numbertext">10 / 10</div>
<img src="images/gallery/intro10.jpg" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>
<br><br>

<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span> 
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span> 
<span class="dot" onclick="currentSlide(4)"></span> 
<span class="dot" onclick="currentSlide(5)"></span> 
<span class="dot" onclick="currentSlide(6)"></span> 
<span class="dot" onclick="currentSlide(7)"></span> 
<span class="dot" onclick="currentSlide(8)"></span> 
<span class="dot" onclick="currentSlide(9)"></span> 
<span class="dot" onclick="currentSlide(10)"></span> 


</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}    
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";  
}
for (i = 0; i < dots.length; i++) {
  dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";  
dots[slideIndex-1].className += " active";
}
</script>
<div class="textcontainer">
<p>
<center>
<span class="hot">WELCOME TO MARIEPSKOP VIEW CHALETS</span>
</center> </p>`
<p><center><span class="basictext">Located between the famous 
<span class="basiceffect">Blyde River Canyon</span> and the 
<span class="basiceffect">Kruger National Park(Orpen Gate)</span>,
<p>our lodge offers the best situation in the region. 
Halfway from all the  activites around, </p>
<p>experience the very best of South Africa and relax in our 
cosy  rooms</p>   </span></center></p>
</div>                      
<div class=map>
/* Theres a IFRAME tag here with google map styled width 100% border:0 and frameborder:0 but I cant add the four saces before it so I deleted it from here */

   <div class="parallax"></div>
   </div>   
   </div>
   </body>