gpt4 book ai didi

javascript - js 使用 css 格式隐藏/取消隐藏

转载 作者:太空宇宙 更新时间:2023-11-03 18:35:54 24 4
gpt4 key购买 nike

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

最佳答案

您的问题可能是您有双 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,您代码中的 content1div 而不是 a

关于javascript - js 使用 css 格式隐藏/取消隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18680739/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com