앵커 태그를 지정하여 콘텐츠를 확장하는 방법

앵커 태그를 사용하여 페이지 아래로 이동하는 자세한 정보를 보려면 클릭하는 링크가있는 목록이 있습니다. 꽤 많은 추가 정보가 있기 때문에 확장 가능/접을 수있는 섹션에 숨겨져 있습니다.앵커 태그를 지정하여 콘텐츠를 확장하는 방법

지금까지 제가 관리해 온 부분은 섹션 자체의 확장 축소입니다. 기본적으로 Javascript에 대해서는 아무 것도 몰라요. 그래서 제가 가지고있는 것은 다른 사이트와 연구에서 함께 나온 것들입니다.

'click more'앵커 태그 링크를 클릭하면 섹션이 자동으로 펼쳐지기를 바랍니다. 그러나 지금 내가 가지고있는 것과 유사한 링크를 펼칩니다. 여기

내가 함께

<script type="text/javascript"> 
    function toggle_visibility(tbid,lnkid) { 
     if (document.all) { 
      document.getElementById(tbid). style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block"; 
     } 
     else { 
      document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table"; 
     } 

     document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse"; 
    } 
</script> 

<style type="text/css"> 
    .hangingIndent { 
     text-indent: -24px; 
     padding-left: 24px; 
    } 
    #tbl1 {display:none;} 
    #lnk1 { 
     border:none; 
     background:none; 
     width:85px; 
    } 
</style>

을 끌어 관리하는 JS입니다 그리고 여기 당신의 도움에 대한

<body style="background-color: #FFFFFF; margin: 20;"> 
    <p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;" class="hangingIndent"> 
     <input type="checkbox"> 
      <strong>Item one</strong><br /> 
      <em>For more information about Item one <a href="#Item1">click here</a>!</em> 
    </p> 
    <br /> 

    <table width="800px" border="0" align="center" cellpadding="4" cellspacing="0"> 
     <tr height="1"> 
      <td bgcolor="#333333" colspan="3"></td> 
     </tr> 
     <tr bgcolor="#EEEEEE" height="15"> 
      <td> 
       <strong><a id="Item1">Item one</a></strong> 
      </td> 
      <td bgcolor="#EEEEEE" align="right"> 
       <input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="3"> 
       <table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1"> 
        <tr> 
         <td colspan="3"> 
          <p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;">Lots of extra information about Item one</p> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
    <br /> 
</body>

덕분에 몸의 예입니다!

출처

2014-01-27 Sarah

jQuery를 살펴 보자하는 것입니다, 이런 종류의 많은 당신을 위해 수행됩니다. – ElendilTheTall

jquery가 최상의 경로 일 수 있으며 특히 slideToggle 또는 show and hide 기능이 유용 할 수 있습니다.

document.getElementById(idOfElement).style.display="none"

그들에게 보여 :

document.getElementById(idOfElement).style.display="block"

함수를 만들 수 있습니다 또한 는 요소를 숨길 수의 jQuery UI 아코디언에서 들여다

A jquery accordion may be your best route

출처

2014-01-27 16:18:08 user466764

이

function toggleElementDisplay(elementID){ 

    element = document.getElementById(elementID); 

    if(element.getPropertyValue("display") == "block"){ 
     element.style.display="none"; 
    } else { 
     element.style.display="block"; 
    } 

}

가 여기이

<body> 
<div id="click" onClick="toggleElementDisplay('stuff');">Toggle</div> 
<div id="stuff">Hello</div> 
<script> 
function toggleElementDisplay(elementID) { 
    var element = document.getElementById(elementID), 
     style = window.getComputedStyle(element), 
     display = style.getPropertyValue("display"); 

    if (display == "block") { 
     element.style.display = "none"; 
    } else { 
     element.style.display = "block"; 
    } 

} 
</script> 
</body>

처럼 그것을 사용하는 것은 demo가

출처

2014-01-27 16:24:39

앵커 태그를 지정하여 콘텐츠를 확장하는 방법

답변

관련 문제