Как сделать текст видимым с правой стороны div onclick?

Question

Я создаю страницу часто задаваемых вопросов, где мне нужно задать все мои вопросы в левой части окна div. Когда я нажимаю на вопросы, соответствующий ответ на вопрос должен быть видимым с правой стороны от div, на той же странице. Я пробовал много разных вещей, но я все еще не в состоянии это сделать.

Кроме того, как я могу сделать только ответ на соответствующий вопрос видимым?

Заранее спасибо.

Answer 1

Использование JQuery,
HTML:

<div> <-- For each question --> 
    <div style="float: left;" onclick="showAnswer(this);">Question</div> 
    <div style="float: right; display: none;">Answer</div> 
</div> 

Javascript:

function showAnswer(cntrl) 
{ 
    $(cntrl).next().toggle(); 
} 

Answer 2

проверить это

HTML

<table> 
<tr><td class="question">question1?</td><td class="answer">answer1</td></tr> 
<tr><td class="question">question2?</td><td class="answer">answer2</td></tr> 
<tr><td class="question">question3?</td><td class="answer">answer3</td></tr> 
<tr><td class="question">question4?</td><td class="answer">answer4</td></tr> 
<tr></tr> 
</table> 

SCRIPT

$(document).ready(function() { 
     $(".answer").hide(); 
     $(".question").click(function() { 
      $(".answer").hide(); 
      $(this).parent().children(".answer").show(); 
     }); 
    }); 

Answer 3

Можно также хранить идентификатор ответа в атрибуте тега, а затем просто при нажатии получить метку, и показать соответствующий элемент.

<script> 
$(document).ready(function() { 
    $('#answers div').hide(); 
    $('#questions ul li').click(function() { 
     var answer = $(this).attr('tag'); 
     $('#' + answer).show(); 
    }); 
}); 
</script> 

<div id="questions" style="float: left;"> 
    <ul> 
     <li tag="answer1">Question 1</li> 
     <li tag="answer2">Question 2</li> 
     <li tag="answer3">Question 3</li> 
     <li tag="answer4">Question 4</li> 
    </ul> 
</div> 

<div id="answers" style="float: right;"> 
    <div id="answer1">This is answer 1</div> 
    <div id="answer2">This is answer 2</div> 
    <div id="answer3">This is answer 3</div> 
    <div id="answer4">This is answer 4</div> 
</div> 

Answer 4

Simple JS:

function showDiv(id) { 
    for (var i=1;i<=4;i++) 
    { 
     document.getElementById('div'+i).style.display = 'none'; 
    } 
    document.getElementById('div'+id).style.display = 'block'; 
} 

HTML:

<div class="qaContainer" style="width:400px;"> 
<div class="leftContainer" style="float:left;"> 
    <a href="javascript:" onClick="showDiv('1');">Question 1</a><br /> 
    <a href="javascript:" onClick="showDiv('2');">Question 2</a><br /> 
    <a href="javascript:" onClick="showDiv('3');">Question 3</a><br /> 
    <a href="javascript:" onClick="showDiv('4');">Question 4</a><br /> 
</div> 
<div class="rightContainer" style="float:right;"> 
<div id="div1" style="display:block;">Answer1</div> 
<div id="div2" style="display:none;">Answer2</div> 
<div id="div3" style="display:none;">Answer3</div> 
<div id="div4" style="display:none;">Answer4</div> 
</div> 
</div> 

Answer 5

Так если у вас есть вопросы по левой стороне и ответы на правой стороне Вы HTML должен выглядеть следующим образом

<div id="questions"> 
    <ul> 
     <li data-qnum="1"></li> 
     ... 
     <li data-qnum="N"></li> 
    </ul> 
</div> 
<div id="answers"> 
<ul> 
<li data-ansnum="1"></li> 
... 
<li data-ansnum="N"></li> 
</ul> 
</div> 

И CSS должен быть чем-то нг, как это

#questions,#answers{ 
    float:left; 
} 
.specialClass{ 
    color:red; 
} 

Теперь JQuery должно быть что-то вроде этого:

$(document).ready(function(){ 
//hide all answers 
$("#answers").find("li").hide(); 

//and then add click handler on questions 

$("#questions").on("click","li",function(e){ 
// preventdefault prevents any default action so that you may replace li with a or any other tag 
e.preventDefault(); 

// you may also add any special formatting on the question clicked like making it red 
$("#questions").find("li").removeClass('specialClass'); 
$(this).addClass('specialClass'); 
var qnum = $(this).data('qnum'); 
//hide all shown answers  
$("#answers").find("li").hide().each(function(){ 
// show the correct answer 
var anum =$(this).data('ansnum'); 
    if(anum==qnum) 
    {$(this).toggle(); }         }); 

         }); 

Также смотрите эту скрипку http://jsfiddle.net/s4HEh/1/

PS: отметить также, что этот JQuery использует синтаксис делегирования надлежащего события и не использует Id на вопрос, так что вы можете использовать свой идентификатор для чего-то более важного

Answer 6

Попробуйте это .. только простой способ сделать это

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <style type="text/css"> 
    #left 
    { 
     width:50%; 
     background-color:Yellow; 
     float:left; 
    } 
    #right 
    { 
     width:50%; 
     background-color:Red; 
     float:right; 
    } 
    .answers 
    { 
     display:none; 
    } 

    </style> 
    <script src="../JS/jQuery.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     function showAnswer(ans) { 
      $(".answers").hide(); 
      $("#" + ans).toggle(); 

     } 

    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <div id="left"> 
    <ul id="questions"> 
    <li onclick="showAnswer('ans1')">q1</li> 
    <li onclick="showAnswer('ans2')">q2</li> 
    </ul> 
    </div> 

    <div id="right"> 
    right 
    <ul id="answers"> 
    <li id="ans1" class="answers">Answer1</li> 
    <li id="ans2" class="answers">Answer2</li> 
    </ul> 
    </div> 
    </div> 
    </form> 
</body> 
</html> 

Позвольте мне знать, если это помогло. или если у вас есть какие-либо вопросы.