html을 사용하지 않고 목차 스타일 FAQ 웹 페이지 만들기

Question

모든 질문이 목차 (예 : Wikipedia와 유사)와 함께 배치 된 사이트에서 FAQ 페이지를 만들려고합니다. 질문을 클릭하면 대답과 함께 페이지 아래로 질문 (위에서 반복)으로 이동합니다.

질문이 페이지에 두 번 나타나기 때문에 명백한 방법으로 코드에 질문이 두 번 나타나면 질문을 수정해야하거나 질문을 수정할 필요가있는 경우 문제가 발생할 수 있습니다. 한 곳에서 코드를 작성하십시오.

또한 각 질문/답변 쌍 앞에 의미없는 이름으로 앵커 태그를 넣는 것은 비논리적입니다. 숫자를 사용하면 질문을 추가하거나 제거 할 때 다시 문제가 발생할 수 있습니다.

기본적으로 질문과 답변을 배열 (PHP 또는 자바 스크립트를 사용하고 있을까요?) 또는 배열 쌍에 저장 한 다음 배열의 각 요소에 대해 다음과 같이 목록 항목을 저장하는 방법이 필요합니다. 생성 된 앵커 태그, 질문 및 답변. 이것이 가능합니까 아니면 여기 웹 개발에 잘못된 접근 방식을 취하고 있습니까?

관련 질문 : 글 머리 기호를 "Q :"로 대체하기 위해 정렬되지 않은 목록의 스타일을 지정하는 방법이 있습니까?

Answer 1

<?php 
    $questions = array(
     "Question 1", 
     "Question 2", 
     "Question 3", 
     "Question 4" 
    ); 

    echo '<p>';  // FAQ Menu 

    foreach ($questions as $key => $question) { 
     echo '<a href="#', $key, '">', $question, '</a><br />'; 
    } 

    echo '</p>'; 

    // Begin FAQ 

    foreach ($questions as $key => $question) { 
     echo '<h2><a name="', $key, '">', $question, '</a></h2>'; 
    } 

?> 

:

ul { 
list-style-position: outside; 
list-style-image: url("image.gif") 
list-style-type: square; 
} 

더 informaiton는 여기에서 찾을 수 있습니다 : 그것은 같이 보일 것입니다. 배열 키가 앵커 이름이되므로 질문을 변경하려면 배열에서 한 번만 수정하면됩니다.

당신이 당신의 질문과 답변을 분리하려는 경우, 당신은이를 사용할 수 있습니다

<?php 
    $questions = array(
     array("Question 1", "Answer 1"), 
     array("Question 2", "Answer 2"), 
     array("Question 3", "Answer 3"), 
     array("Question 4", "Answer 4") 
    ); 

    echo '<p>'; 

    foreach ($questions as $key => $question) { 
     echo '<a href="#', $key, '">', $question[0], '</a><br />'; 
    } 

    echo '</p>'; 

    foreach ($questions as $key => $question) { 
     echo '<h2><a name="', $key, '">', $question[0], '</a></h2>'; 
     echo '<p>', $question[1], '</p>'; 
    } 

?> 

Answer 2

목차를 만드는 가장 쉬운 방법은 확실히 앵커를 사용하는 것입니다. 업데이트, 생성 및 활용하기 쉽습니다. Wikipedia와 같은 사이트를 보면 anchor-table-of-contents 방식을 사용합니다. 클라이언트가 웹 페이지를 편집 할 수 있습니까? 그렇지 않으면 큰 번거 로움이 있어서는 안됩니다.

사이드 질문에 대해서는 CSS를 통해 목록의 글 머리 기호를 편집하고 이미지로 대체하는 것이 가능하다는 것을 알고 있습니다. 당신은 당신이 원하는 서식을 얻기 위해 HTML을 수정할 수 있습니다 http://www.mediacollege.com/internet/css/ul-list.html