JavaScript隱藏DIV

-3

我將如何利用Javascript顯示感謝信的「頁面」 - 這樣，當點擊一個鏈接時，它會顯示一組DIV的內容並隱藏其他內容，從而允許我使用編號鏈接瀏覽內容。我附上了我的基本設計的代碼，我只是不熟悉如何使用JS來實際使它的功能。在搜索SOF中，我只能找到使用Jquery腳本的示例，但我沒有jQuery。JavaScript隱藏DIV

目標是，當您點擊右上角的「1」鏈接時，只有頁面上會顯示「1」的blurb，與點擊「2」鏈接相同，所有的1和3都會消失只有2的混亂將顯示。

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>

來源

2016-03-28 Andy Parker

我投票關閉這一問題作爲題外話，因爲這麼來這裏不是爲了寫代碼，但你要幫助你與你寫的代碼。 – Rob

差勁的問題，請STFW –

隱藏

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

顯示

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

考慮到學習jQuery做的事情變得更容易。

您甚至可以通過使用錨點（href="#some-name-in-the-page"）和CSS選擇器:active來解決問題。

來源

2016-03-28 01:07:52

您可以通過ID與這樣一個href：

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

來源

2016-03-28 01:04:02

您可以輕鬆實現使用JQuery切換。這將根據您指定的選擇器隱藏和顯示。它可能是一個類或id或元素。

例子：

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

來源

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>

類似的東西會做的伎倆，顯然你需要做的要麼爲每一個類似的東西，或者重構它與每個工作而不會破壞DRY原則。

看看：http://www.w3schools.com/js/js_htmldom_eventlistener.asp

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

來源

2016-03-28 01:11:23 Adam

JavaScript隱藏DIV

回答

相關問題