将html包含到html页面

那么我是新来的HTML/JS脚本，但我正在一个项目，我想用超链接来显示/隐藏div 例如，如果我点击第一个超链接，它应该显示div id：1只，如果我点击第二个超链接，它应该只显示2nd div。我设法找到了什么，我需要互联网上的例子，但我不知道，为什么不管我尝试它亘古不变的工作对我来说将html包含到html页面

an example of what i need - my fiddle

，这是我的代码

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#myDIV { 
 
    width: 100%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top:20px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<body> 
 
    Click a button to make it visible:<br /><br /> 
 
<a href="#" class="one">One</a> 
 
<a href="#" class="two">Two</a> 
 
<a href="#" class="three">Three</a> 
 
<a href="#" class="four">Four</a><br /><br /> 
 

 
    <div id="one">One</div> 
 
    <div id="two">Two</div> 
 
    <div id="three">Three</div> 
 
    <div id="four">Four</div><br/><br/> 
 

 

 

 

 
</body> 
 

 

 
<script> 
 
$("div").hide(); 
 
      // Show chosen div, and hide all others 
 
     $("a").click(function (e) 
 
     { 
 
      //e.preventDefault(); 
 
      $("#" + $(this).attr("class")).show().siblings('div').hide(); 
 
     }); 
 
</script> 
 

 
</body> 
 
</html>

来源

2017-08-28 Aksel2099

以及..你缺少的jquery.js补充一点： –

它对我工作JSFIDDLE在本地项目上添加jQuery库 –

您还可以使用'jquery tabs'：https：//jqueryui.com/tabs/ –

所以你需要包括JQuery这就是$()是。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<style> 
 
#myDIV { 
 
    width: 100%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top:20px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<body> 
 
    Click a button to make it visible:<br /><br /> 
 
<a href="#" class="one">One</a> 
 
<a href="#" class="two">Two</a> 
 
<a href="#" class="three">Three</a> 
 
<a href="#" class="four">Four</a><br /><br /> 
 

 
    <div id="one">One</div> 
 
    <div id="two">Two</div> 
 
    <div id="three">Three</div> 
 
    <div id="four">Four</div><br/><br/> 
 

 

 

 

 
</body> 
 

 

 
<script> 
 
$("div").hide(); 
 
      // Show chosen div, and hide all others 
 
     $("a").click(function (e) 
 
     { 
 
      //e.preventDefault(); 
 
      $("#" + $(this).attr("class")).show().siblings('div').hide(); 
 
     }); 
 
</script> 
 

 
</body> 
 
</html>

来源

2017-08-28 12:55:00 aahhaa

您应该在'head'或''head''中添加'

这是为我工作有关的jsfiddle。在本地项目中添加jQuery库。

添加这在你的头上标签

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

来源

2017-08-28 12:56:08

你忘了，包括$jquery在你script tag

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#myDIV { 
 
    width: 100%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top:20px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<body> 
 
    Click a button to make it visible:<br /><br /> 
 
<a href="#" class="one">One</a> 
 
<a href="#" class="two">Two</a> 
 
<a href="#" class="three">Three</a> 
 
<a href="#" class="four">Four</a><br /><br /> 
 

 
    <div id="one">One</div> 
 
    <div id="two">Two</div> 
 
    <div id="three">Three</div> 
 
    <div id="four">Four</div><br/><br/> 
 

 

 

 

 
</body> 
 

 
<script 
 
    src="https://code.jquery.com/jquery-1.12.4.min.js" 
 
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
 
    crossorigin="anonymous"></script> 
 
<script> 
 
$("div").hide(); 
 
      // Show chosen div, and hide all others 
 
     $("a").click(function (e) 
 
     { 
 
      //e.preventDefault(); 
 
      $("#" + $(this).attr("class")).show().siblings('div').hide(); 
 
     }); 
 
</script> 
 

 
</body> 
 
</html>

来源

2017-08-28 12:56:25

你应该在你的项目中添加的jQuery。您可以使用CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

您可以在项目中自己的库副本。

<script src="path/jquery.min.js"></script>

来源

2017-08-28 12:58:01 kushalvm

将html包含到html页面

回答

相关问题