如何在div onclick右側顯示文字？

-1

我正在創建一個常見問題頁面，我需要將所有問題放在div的左側。當我點擊問題時，問題的相應答案應在div的右側顯示在同一頁面上。我嘗試過很多不同的東西，但我仍然無法做到。如何在div onclick右側顯示文字？

另外，我怎樣才能使相應問題的答案可見？

在此先感謝。

來源

2014-02-21 Sugs

將它放在表格的td標籤中。你可以輕鬆地做到這一點 –

請發佈代碼，看看你迄今爲止做了什麼..應該幫助別人確定應該做些什麼來幫助你 –

http://stackoverflow.com/questions/21926432/click-a-button顯示或隱藏表 – Era

使用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(); 
}

來源

2014-02-21 07:09:02 P5Coder

檢查了這一點

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(); 
     }); 
    });

來源

2014-02-21 07:11:55

您也可以存儲在標籤屬性答案的ID，然後只需點擊時獲取代碼，並顯示相應的元素。

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

來源

2014-02-21 07:13:23 weiver

簡單的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>

來源

2014-02-21 07:18:08 TechFreak

因此，假如你有右側在左側的問題和答案你的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應該是somethi NG這樣

#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上的問題，這樣你可以用你的身份證更重要的東西

來源

2014-02-21 07:28:41 DhruvJoshi

試試這個..做

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

讓我知道，如果這有助於只是一個簡單的方法。或者如果您有任何疑問。

來源

2014-02-21 07:35:52

單擊第一個問題然後第二個時發生什麼......此問題會顯示兩個答案，可能不是最好的事情。隱藏一個，然後顯示新的答案 – DhruvJoshi

@DhruvJoshi：錯過了隱藏其他答案的部分..謝謝你讓我知道..已經做出了改變。 –

很高興能有所幫助。幹得好！ – DhruvJoshi

如何在div onclick右側顯示文字？

回答

相關問題