如何通过链接点击更改div的内容？ [英] How to change the contents of a div with a link click?

问题描述

这是我的网页的（修改）jsfiddle。它有很多，和定位是正确的，而不是这样： http://jsfiddle.net/ ry0tec3p / 1 /

 < a href =class =btn1style = ; margin-left：-640px; margin-top：167px;>关于< / a> 
  

问题
教程
社交

我试图在网页中间（中心div。）改变html当我点击上面的链接之一（这看起来像几个标签页网页），我希望标签保持选中，直到另一个点击。它不能只是文本，因为不同的选项卡将有不同的HTML。

编辑：
我试过使用：

  $（。btn1）。click（function（）{
   
 
 $（。center）。load（file.html）; 
}）; 
 
 
 
 
 
 
 
此外，我已经查看了内部的HTML，但是我在实现它的努力失败了，因为我是无知的。
解决方案
如果你试图在本地运行它，你可能会发现它不工作，你必须有一个在现场服务器上。 与您要求的文件位于同一个网域 
 
 
 
这是jQuery，因此请确保您有一个脚本标记链接到jQuery！ 
 
 
 
  HTML  
 < button id =homeclass =Navigation>首页< / button> 
< button id =aboutclass =Navigation>关于我们< / button> 
< button id =contactclass =Navigation>与我们联系< / button> 
< div id =PageData>数据将显示在此< / div> 
  
  jQuery  
  $（document）.ready（function（）{//所有jQuery都应该在这个准备好的函数中
 // Onclick函数
 $（' ）.click（function（）{
 // this.id =到被点击的元素的ID 
 $（'＃PageData'）。load（this.id +。html）; 
}）; 
}）; 
  
所有你需要做的工作到现有的源代码。 
您可以将 class =Navigation应用于要用于触发函数的任何元素，但它将使用 ID 的元素加载页面。
 
 
 
示例一个带有 id 将尝试加载 cars.html  
 
 
 
我希望这有助于。快乐编码！ :) 
 
 
 
  演示演示  
 
Here is a (Modified) jsfiddle of my webpage. It has quite a bit more, and the positioning is correct, as opposed to this: http://jsfiddle.net/ry0tec3p/1/
<a href="" class="btn1" style="position: absolute; margin-left: -640px; margin-top: 167px;">About</a>   
Questions
Tutorials
Social

I'm trying to make the slightly transparent black area in the middle of the webpage (the "center" div.) change html when I click on one of the links above(which look like a few tabs on the webpage), and I want the tab to stay selected until another is clicked. It can't be just the text, because different tabs will have different HTML. Could somebody edit the jsfiddle, or show me how to, to make this happen?

EDIT:
I've tried using:
$(".btn1").click(function(){
$(".center").load( "file.html" );
});

which did nothing at all.

also,  I have looked into inner HTML, but my attempts at implementing it into this have failed because I'm ignorant.
解决方案
If you attempt to run this locally it you may find it will not work, you must have this on a live server. And on the same domain as the files you're calling for

This is jQuery so make sure you have a script tag linked to jQuery! 

HTML
<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>
jQuery
$(document).ready(function(){ //All jQuery should go in this ready function
       //  Onclick function
        $('.Navigation').click(function () {   
      // this.id = to the ID of the element being clicked
        $('#PageData').load(this.id+".html");
        }); 
});
All you need to do it work this into your existing source code.
You can apply the class="Navigation" to any element you want to use to fire the function but it will use the ID of that element to load the page.

Example a button with the id of cars will try load cars.html 

I hope this helps. Happy coding! :) 

WORKING DEMO!

                        
这篇关于如何通过链接点击更改div的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！