私は次のjsスクリプトを持っています(それ自体は本当にうまく動作します):
<style>
<!--
.hide { display: none; }
.unhide {
display: block;
text-decoration: none;
color: black;
}
-->
</style>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hide')?'unhide':'hide';
}
}
</script>
</head>
<body>
<div id="col2">
<a href="javascript:unhide('content1');">
Title of Content</a>
</div>
<div id="col2">
<div id="content1" class="hide">
Body of content
</div>
</div>
放っておけば、少なくとも出力が生成されます。しかし、このcssコードに従ってこれをフォーマットしたい:
a.unhide li {
background: #fff;
font: 20px century schoolbook, serif;
}
a.unhide li:hover {
background: #ddd;
text-decoration:underline;
padding: 3px 8px;
display: table-row;
line-height: 500%;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
.hide {
font: 20 px century schoolbook, serif;
color: black;
text-decoration: none;
}
では、どうすればこれらすべてを「ペアリング」できますか? 私は他の場所に投稿しましたが、人々は困惑しています。助けてください。ほぼすべての側面に変更を加えることができますが、js スクリプトの「非表示」部分は変更できます。それは私に協力しません ;( 基本的に、「再表示」リンクとすべてのコンテンツの上に #ddd ホバー効果を付けて、世紀の教科書に入れたいと思っています。助けてください。ありがとう。