Question

代码工作正常。它的作用是隐藏一些东西，在这种情况下就是答案。单击问题后，它将显示答案。无论如何-一旦单击它，我一直试图做的事情，我希望问题和答案是不同的-例如背景颜色不同，或者问题和答案周围有红色边框-以便将其与其余的问题。一旦我单击其他内容，它就会消失。我一直在尝试在CSS中执行此操作，但无法执行。

 <head>
 <meta charset="utf-8"> 
 <title> THis is the title </title> 
 <style> 
 .clicker {
 border-style: solid; 
 border-width: 1px; 
 display: inline-block; 
 padding: 5px ; 
 outline:none;
 cursor:pointer;
 }

 .hiddendiv{
 display:none;
 padding: 5px; 
 }
 .clicker:focus + .hiddendiv{
 dispay:block;
 }
 </style> 
  </head>
  <body>

  <h2> Flashcards</h2>
  <div class="clicker" tabindex="1">
  <p>This is the first question </p>
   </div>
   <div class="hiddendiv">
   <img src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png"/> 
   </div>
   <p> </p>
   <div class="clicker" tabindex="1">       <p>Second question </p>
   </div>
   <div class="hiddendiv"> 
 <img src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png"/> 
 </div>
 <p> </p> 
 </body> 
 </html>

Answer 1

解决了您的问题。请运行以下代码。我希望您只在寻找此功能。

Public Sub sub_test()

    Dim wsThis As Worksheet: Set wsThis = ActiveSheet
    Dim vData As Variant
    Dim dicOutput As Object: Set dicOutput = CreateObject("scripting.dictionary")
    Dim vTemp As Variant
    Dim vLine As Variant
    Dim i As Long


    With wsThis
        ' Read data into memory - assume no header
        vData = .Range(.Range("A1"), .Range("A1").End(xlDown))

        ' Loop through each row
        For i = LBound(vData, 1) To UBound(vData, 1)
            ' Split by new line
            vTemp = Split(vData(i, 1), Chr(10))
            For Each vLine In vTemp
                ' Check if new line is empty string
                If Trim(vLine) <> vbNullString Then
                    dicOutput(vLine) = 1
                End If
            Next vLine
        Next i
        vTemp = Application.Transpose(dicOutput.keys)

        ' Output into worksheet - assume column C
        .Range("C1").Resize(UBound(vTemp, 1) - LBound(vTemp, 1) + 1, UBound(vTemp, 2) - LBound(vTemp, 2) + 1) = vTemp
    End With



End Sub

Answer 2

您可以尝试以下操作：

.clicker {
   border-style: solid;
   border-width: 1px;
   display: inline-block;
   padding: 5px;
   outline: none;
   cursor: pointer;
 }

 .hiddendiv {
   display: none;
   padding: 5px;
 }
 
 /* Highlight focused question */
 .clicker:focus {
   background-color: green;
   border: 2px solid darkgray;
   color: white;
 }

 /* Highlight focused answer */
 .clicker:focus+.hiddendiv {
   display: block;
   background-color: darkgray;
   border: 2px solid green;
 }

<h2> Flashcards</h2>
<div class="clicker" tabindex="1">
  <p>This is the first question </p>
</div>
<div class="hiddendiv">
  <img src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png" />
</div>
<p> </p>
<div class="clicker" tabindex="1">
  <p>Second question </p>
</div>
<div class="hiddendiv">
  <img src="https://cdn4.iconfinder.com/data/icons/champions-1/512/Champions-04-512.png" />
</div>
<p> </p>

jsFiddle

在问题和答案周围创建边框

2 个答案: