Question

我有以下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悬停效果超过“取消隐藏”链接，所有内容都在世纪教科书中。请帮忙。谢谢。

Answer 1

您的问题可能是您有两倍IDs。 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';
    }
}

演示here

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

js用css格式隐藏/取消隐藏

1 个答案:

演示here