Question

我有一个SharePoint 2010网站，并且只想在wikipage中使用CSS。

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

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

我猜这两种选择都是开放的。如果是javascript可以内联吗？

Answer 1

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

使用内联js点击处理程序不是很好，因为它会让你不得不重复自己，但是从你正在反对的事情的声音中没有足够的访问Sharepoint（叹息，公司网络）。 / p>

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

<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

单击图像时打开文本框的CSS

1 个答案: