Einschließlich JavaScript zu einer HTML-Seite

Nun, ich bin neu zu html/js Scripting, aber ich arbeite an einem Projekt, und ich möchte mit Hyperlink zu zeigen/verbergen divs zum Beispiel, wenn ich auf den ersten Hyperlink klicken sollte es zeigen div id: 1 nur und wenn ich auf den zweiten Hyperlink klicke, sollte nur das 2. div angezeigt werden. ich es geschafft, ein Beispiel zu finden, was ich im Internet brauchen, aber ich habe keine Ahnung, warum, was ich versuche, es Arbeit für mich doesnotEinschließlich JavaScript zu einer HTML-Seite

an example of what i need - my fiddle

und dies ist mein Code

<!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>

Quelle

2017-08-28 Aksel2099

gut .. Sie vermissen jquery.js hinzufügen, um dieses: –

Es funktioniert für mich auf JSFIDDLE jquery Bibliothek in Ihrem lokalen Projekt hinzufügen –

können Sie auch 'jquery Tabs' verwenden: https://jqueryui.com/tabs/ –

so Sie ned, um JQuery das ist, was $() ist.

<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>

Quelle

2017-08-28 12:55:00 aahhaa

Sie sollten die '

Es ist für mich arbeiten auf JSFIDDLE. Fügen Sie die jquery-Bibliothek zu Ihrem lokalen Projekt hinzu.

Dieses auf Ihrem Tag Kopf hinzufügen

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

Quelle

2017-08-28 12:56:08

Sie $jquery in Sie script tag

umfassen vergessen

<!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>

Quelle

2017-08-28 12:56:25

Sie jquery in Ihrem Projekt hinzufügen sollten. Sie können eine CDN verwenden

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

ODER

Sie Ihre eigene Kopie der Bibliothek in Projekt enthalten.

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

Quelle

2017-08-28 12:58:01 kushalvm

Verwandte Themen

Einschließlich JavaScript zu einer HTML-Seite

Antwort

Verwandte Themen