Javascript js使用css格式隐藏/取消隐藏_Javascript_Css_Hyperlink_Hover_Fade

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

javascript css hyperlink

Javascript js使用css格式隐藏/取消隐藏,javascript,css,hyperlink,hover,fade,Javascript,Css,Hyperlink,Hover,Fade,我有下面的js脚本，它本身运行得很好： <style>  </style> <script type="text/javascript"> function unhide(divID) { var item = document.getElementB

我有下面的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>

那我怎么可能把这一切配对呢？我在别处发过帖子，人们都被难住了。请帮忙。除了js脚本的取消隐藏部分之外，我几乎可以对每个方面进行更改。它不与我合作；基本上，我希望在取消隐藏链接上有ddd悬停效果，所有内容都在世纪教科书中。请帮忙。谢谢。

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

请尝试以下方法：

HTML

演示

在CSS中，您正在将悬停应用于a.unhide li:hover{。这就是你想要的吗？我看你的代码中没有li，代码中的内容1是div而不是a。

请改进你的问题，意味着根据上一个css放置html，然后我们可以帮助制作jshey developerCK。我不确定根据上一个css放置html意味着什么。你能澄清一下吗？对不起，我还是个编程新手。你在为li制作css，对吗？A.unhide li，但给定的html代码不包含li。刚刚更新了我的答案。还检查了我写的关于css的内容。嘿developerCK，谢谢你澄清…是的，在我的html中，我插入了一些内容以获得li效果，css是一个外部文件。基本上是这样的：但是A.unhide li在我看来是错误的眼睛…是的，a。解开隐藏李：悬停{.所以我应该用content1作为@AlexanderTrahaj，里面有吗？我在你的代码中没有看到。嘿，Sergio-JSFIDLE给我带来了一点麻烦。我可以进行更改，但我不能运行这些更改…@AlexanderTrahaj，你看到运行按钮了吗？否则你可以更新并返回我实际上没有意识到需要进行的链接一个帐户。刚刚创建。中应该有一个。我遗漏了它。我很抱歉。此外，我正在运行代码，但单击内容标题不会隐藏内容主体。

 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;
 }

<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';
    }
}