Javascript zum verstecken eines DIV

-3

Wie würde ich Javascript verwenden, um "Seiten" von Zeugnissen zu zeigen - so dass beim Klicken auf einen Link zeigt eine Reihe von DIV und verbirgt die anderen, so dass ich durch den Inhalt mit nummerierten Links. Ich habe meinen Code des grundlegenden Designs beigefügt, ich bin nur nicht vertraut mit der Verwendung von JS, um es tatsächlich funktionieren zu lassen. Bei der Suche nach SOF kann ich nur Beispiele finden, die Jquery-Skripte verwenden, aber ich habe keine jquery.Javascript zum verstecken eines DIV

Ziel ist, dass, wenn Sie auf den Link "1" in der oberen rechten Ecke klicken nur die Blökke mit "1" auf der Seite, gleich mit dem Klicken auf den Link "2", alle 1 und 3 wird verschwinden und nur die verschwommenen mit den 2's werden angezeigt.

CSS

@charset 'utf-8'; 
/* CSS Document */ 

body { 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    padding: 0px; 
    background-color: #A8A8A8; 
    font-size:14px; 
    font-family: 'Open Sans', sans-serif; 
} 

box { 
    background-color:#FFFFFF; 
    width:950px; 
    height:400px; 
    margin-left:auto; 
    margin-right:auto; 
} 

.testimonialnavigation { 
    width:950px; 
    margin-left: auto; 
    margin-right: auto; 
} 

ul.testimonialpages { 
    list-style-type: none; 
    font-size: 16px; 
    font-weight: bold; 
    padding-right:30px; 
} 

.testimonialpages li a { 
    float: right; 
    color: #FFFFFF; 
    text-decoration: none; 
    text-align: center; 
    margin-left: 5px; 
    margin-right: 5px; 
    height:30px; 
    width:30px; 
    line-height:30px; 
    background-color:#C82633; 
    display:inline-block; 
} 

.testimonialpages li a:hover { 
    color: #FFFFFF; 
    background-color: #737373; 

} 

.testimonials { 
    clear:both; 
    width:875px; 
    margin-top:20px; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:20px; 
    background-color:#EDEDED; 
    min-height:50px; 
    border-radius: 15px; 
    padding:15px; 
} 

.testimonials:nth-of-type(odd) { 
    background-color:#D3D3D3; 
} 

.hidden { 
    display:none; 
}

HTML

<!doctype html> 
<html> 
<head> 
<meta charset='utf-8'> 
<title>Title</title> 
<link rel='stylesheet' href='teststyle.css' /> 
</head> 
<body> 



<div class="box">      

    <div class="testimonialnavigation"> 
     <ul class="testimonialpages"> 
      <li><a href="" id="page1">3</a></li> 
      <li><a href="" id="page2">2</a></li> 
      <li><a href="" id="page3">1</a></li> 
     </ul> 
    </div> 

    <br><br> 


     <div class="container"> 

      <div id="content1" class="testimonials"> 
      <i> 
      111111 111111 111111111 11111111111 
      </i><br> 
      <b> 
      - 11111111111 
      </b> 
      </div> 

      <div id="content2" class="testimonials"> 
      <i> 
      11111 111111 1111111 11111111 1111111111 
      </i><br> 
      <b> 
      - 11111111 
      </b> 
      </div> 

      <div id="content3" class="testimonials"> 
      <i> 
      22222 22222222 222222 2222222 222222222 
      </i><br> 
      <b> 
      - 2222222 
      </b> 
      </div> 

      <div id="content4" class="testimonials"> 
      <i> 
      2222222 222222 2222222222 222222 2222222 222222 
      </i><br> 
      <b> 
      - 222222 
      </b> 
      </div> 

      <div id="content5" class="testimonials"> 
      <i> 
      333333 3333333 33333333 33333333 333333 3 33333333 
      </i><br> 
      <b> 
      - 33333333 
      </b> 
      </div> 

      <div id="content6" class="testimonials"> 
      <i> 
      333333 33333333 333333 333333333333 
      </i><br> 
      <b> 
      - 333333333 
      </b> 
      </div> 

     </div> 
</div> 



</body> 
</html>

Quelle

2016-03-28 Andy Parker

Ich wähle diese Frage als Wegthema zu schließen, weil so nicht hier ist der Code für Sie zu schreiben, aber Sie mit dem Code, um Ihnen geschrieben . – Rob

arme Frage, bitte STFW –

hide

document.getElementById('id-of-some-element').style.display = 'none';

zeigen

document.getElementById('id-of-some-element').style.display = 'block';

Betrachten jQuery zu lernen, die Dinge einfacher zu machen.

Sie könnten das Problem sogar beheben, indem Sie Anker (href="#some-name-in-the-page") und den CSS-Selektor :active verwenden.

Quelle

2016-03-28 01:07:52

Sie die ID mit einem href wie dies passieren kann:

<a href="#mydiv">Take me to my div</a>  

<div id="mydiv"><p>Hello</p></div>

OR:

<a href="#mydiv">Take me to my div</a>  

<h2 id="mydiv">My Div!</h2>

Quelle

2016-03-28 01:04:02

Sie können dies mit JQuery Toggle erreichen. Dies wird basierend auf Ihrem angegebenen Selektor ausgeblendet und angezeigt. Es könnte eine Klasse oder ID oder ein Element sein.

Beispiel:

<script> 
$(document).ready(function(){ 
    $("a").click(function(){ 
     $(".testimonials").toggle(); 
    }); 
}); 
</script>

Quelle

2016-03-28 01:09:22 claudios

<script> 
document.getElementById('page1').addEventListener('click', function(){ 
    document.getElementByClassNames('testimonials').style.display = 'none'; 
    document.getElementById('content1').style.display = 'block'; 
}); 
</script>

So etwas würde es tun, natürlich müssen Sie entweder etwas ähnliches tun, für jeden, oder Umgestalten es mit jedem zu arbeiten, ohne DRY Prinzipien zu brechen.

Werfen Sie einen Blick auf: http://www.w3schools.com/js/js_htmldom_eventlistener.asp

und: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Quelle

2016-03-28 01:11:23 Adam

Javascript zum verstecken eines DIV

Antwort

Verwandte Themen