2

我有一个 SharePoint 2010 站点，并且希望仅在 wikipage 中使用 CSS。

在我的页面上，我有一段信息，最后有一个问题。在观众阅读信息和问题后，我希望他们能够点击显示“答案”的图像。单击“答案”图像时，会在带有答案的问题下方出现一个文本框。我希望答案留在页面上，而不仅仅是悬停在图像上。

我的偏好是仅在 css 中执行此操作。我不认为我有能力在 javascript 中做到这一点。

我猜我对这两种选择都持开放态度。如果是javascript，可以内联吗？

4

1 回答 1

1

就像@JofryHS 提到的那样，css 并没有真正响应点击。

使用内联 js 点击处理程序并不是很好，因为它会让您不得不重复很多次，但是从您正在与没有足够的 Sharepoint 访问权限（叹气，公司网络）作斗争的事情的声音来看。

这使用内联点击处理程序来显示答案：

<div class="question" id="q1">
    What colour is the sky?
    <button class="answerButton" onClick="document.getElementById('q1Answer').style.display='block'">Answer</button>
    <div class="answer" id="q1Answer">
        Overcast and grey, because I live in the UK.
    </div>
</div>


<div class="question" id="q2">
    Why does it always rain on me?
    <button class="answerButton" onClick="document.getElementById('q2Answer').style.display='block'">Answer</button>
    <div class="answer" id="q2Answer">
    I'd have thought you figured this out already... It's Britain, of course it always rains on you!
    </div>
</div>

答案是使用 css 隐藏的（注意块display:none内部.answer）：

.answer {
    display:none;
    background-color:#e5e5ff;
    padding:15px;
}

.question {
    background-color:#f5f5f5;
    padding:15px;
    border-radius:5px;
    margin:7px;
}

本质上，onClick 所做的只是将答案的 css 从 更改display:none为display:block，使答案可见。

还有一点 css 让它看起来更闪亮，这里有一个演示jsfiddle

于 2013-09-12T12:15:41.457 回答