JS使用CSS格式隐藏/取消隐藏

js hide/unhide with css formatting

本文关键字：隐藏 取消 格式 使用 CSS JS      更新时间：2023-09-26

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

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

试试这个：

.HTML 

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

爪哇语

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 {。这就是你想要的吗？我在您的代码中看不到li，并且代码中的content1是div而不是a.

相关文章：