菜单项 (html) 将 javascript 加载到 div答案

【问题标题】：item of menu (html) loads javascript into div菜单项 (html) 将 javascript 加载到 div
【发布时间】：2014-11-10 12:13:46
【问题描述】：

我有用于将页面从菜单加载到 div 的 javascript。此脚本仅加载一页，因为没有为其他页面定义（var page = this.href;）。我不知道如何继续..单击 page2 脚本加载到 div page2.html 后如何设置..我需要扩展这个脚本（我是初学者）。感谢您的回答。

Here is JSFIDDLE

HTML

<div id="menu">
<nav>
<ul>
<li ><a  class="active" href="page1.html" ><b>Page1</b></a></li>
<li ><a  href="page2.html" ><b>Page2</b></a>

</li>                                        
<li ><a   href="page3.html"><b>Page3</b></a>

</li>
<li ><a  href="page4.html"><b>Page4</b></a></li>
<li ><a  href="page5.html"><b>Page5</b></a></li>
</ul>
</nav>   
</div>

<div id="content"> </div>

CSS

nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: rgb(1, 1, 1);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-family: Times New Roman;
font-size: 70%;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li {
float: left;
font-family: Arial;
font-size: 1;
}
nav ul li a:hover, nav ul li a.active, nav ul li a.visited {
background: rgb(177, 2, 10);
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
nav ul li a {
display: block;
padding: 5px 45px;
color: rgb(255, 255, 255);
text-decoration: none;
position: relative;
}
#menu {
position: relative;
width: 780px;
height: 35px;
left: 50%;
margin-left: -388px;
overflow: hidden;
top: -20px;
}

#content {
position:       relative;
float: center;
width: 770px;
height: 670px;

clear:both;
margin:     0 auto;
border-radius: 7px;
overflow: hidden ;
top: 0px;
border: 3px solid black;
}

JAVASCRIPT

$(document).ready(function(){
$('nav ul li a').click(function(e){
    $('nav ul li a').removeClass('active');
    $(this).addClass('active');

    e.preventDefault(); 

    var page = this.href;
    $.get( page, function( data ) {
      $( "#obsahtest" ).html( data );



    });


 });       
 });

【问题讨论】：

您要加载外部页面吗？像这样？ $('#content').load('page2.html');
是的，我愿意。菜单中的页面（page2.html、page3.html 等）。
然后使用这个。 var page = $(this).attr("href"); $('#content').load(page);去掉get函数
这只会加载一页（index.html），就像函数get一样。单击page2脚本加载page2.html后如何设置？

标签： javascript jquery html css

【解决方案1】：

check the js fiddle link

    $(document).ready(function(){
     var defaultpageurl =$('nav ul li a.active').attr('page-href');
     loadhtml(defaultpageurl);

     $('nav ul li a').click(function(){
       $('nav ul li a').removeClass('active');
       $(this).addClass('active');        
        var pagelink = $(this).attr('page-href');
        loadhtml(pagelink);
      }); 

    function loadhtml(pageurl){    
    $("#content" ).load(pageurl);   //its nothing but the page url name
    }

});

对 html 的更改

<div id="menu">
 <nav>
 <ul>
    <li ><a  class="active" page-href="page1.html" ><b>Page1</b></a></li>
    <li ><a  href="#" page-href="page2.html" ><b>Page2</b></a>

    </li>                                        
    <li ><a   href="#" page-href="page3.html"><b>Page3</b></a>

    </li>
    <li ><a  href="#" page-href="page4.html"><b>Page4</b></a></li>
 <li ><a  href="#" page-href="page5.html"><b>Page5</b></a></li>
 </ul>
 </nav>   
 </div>

只是我在代码中重新修改和更改

href="#" page-href="你的页面链接"

【讨论】：

谢谢，但这仍然不起作用。 Skript 仅加载 1 个页面 (index.html)，而其他 .html 则不加载任何内容。

【解决方案2】：

这是您的 html 代码。我刚刚将活动类添加到所有标签中。

<div id="menu">
                    <nav>
                        <ul>
                            <li><a class="active" href="http://www.w3schools.com/tags/tag_object.asp" ><b>Page1</b></a></li>
                            <li><a href="http://www.csgnetwork.com/directselectdisable.html" class="active"><b>Page2</b></a></li>                                        
                            <li><a href="http://www.w3schools.com/tags/tag_object.asp" class="active"><b>Page3</b></a></li>
                            <li><a href="http://www.csgnetwork.com/directselectdisable.html" class="active"><b>Page4</b></a></li>
                            <li><a href="http://www.csgnetwork.com/directselectdisable.html" class="active"><b>Page5</b></a></li>
                        </ul>
                    </nav>   
            </div>

            <div id="content"> </div>

这是javascript代码。

anchorSelect=document.getElementsByClassName('active')

for(i=0;i<anchorSelect.length;i++){  
     anchorSelect[i].addEventListener('click',function(e){ 
     e.preventDefault(); 
     addToDiv(this.href);

   });

}

function addToDiv(x){
  console.log(x);
  document.getElementById("content").innerHTML='<object \
     type="text/html" data=' + x + ' width="100%" height=100%"></object>';
}

【讨论】：