1

我有以下 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悬停效果，并且所有内容都在世纪教科书中。请帮助。谢谢。

4

1 回答 1

0

您的问题可能是您有双重ID。ID 不能重复，它们必须是唯一的。你可以给他们上课。

试试这个：

HTML

<div>
    <a href="javascript:unhide('content1');">
    Title of Content
    </a>
</div>
<div>
    <div class="content1 hide">Body of content</div>
</div>

Javascript

function unhide(divID) {
    var item = document.getElementsByClassName(divID)[0];
    console.log(item);
    console.log(item.className ==  divID + ' hide');
    if (item) {
        item.className = (item.className ==  divID + ' hide') ? divID + ' unhide' : divID + ' hide';
    }
}

演示在这里

在您的 CSS 中，您将悬停应用到a.unhide li:hover {. 那是你要的吗？我在您的代码中看到 noli并且content1您的代码中的div不是a.

于 2013-09-08T05:37:29.017 回答