如何阻止HTML上的隐藏按钮

时间:2017-03-09 08:36:07

标签: javascript html css button hidden

我正在开发一个已经集成在应用程序上的html。在这个HTML上有3个按钮,我添加了新的。当您点击屏幕上的任何人时,这3个按钮会同时显示,但新的按钮似乎没有。怎么可能呢。我该如何解决这个问题。

这就是我想要的:

(当我点击导航按钮时看到所有按钮,但当我点击另一个按钮时,新按钮似乎没有名为180天的文件)

这种情况对所有按钮都有效,没有"导航"但我无法加载图片。我的意思是当你点击第二个按钮时,似乎没有新按钮。

单击第三个按钮时:

(点击查看按钮时,同样的问题也有效)

对于这个html,有一个现成的html,我在其上添加了新按钮。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" type="text/css" href="css/pwietp.css" media="screen" id="screenCSS" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" id="printCSS" />
<link rel="stylesheet" type="text/css" href="css/evoslider/evoslider.css" />
<script type="text/javascript" src="js/jquery.combined.js"></script>
<script type="text/javascript" src="js/ietp-common.js"></script>
<script type="text/javascript" src="js/ietp-nav.js"></script>
<script type="text/javascript" src="js/ietp-search.js"></script>
</head>
<body>
<div id="wrapper"><div id="bar">
<div id="menu"><a href="about.html">About</a></div>
<div id="logoDiv"><img id="logo" src="images/logo.png" /></div>
<form id="search_toolbar" method="get" action="/solr/select">
<input id="searchinput" type="text" name="q" value="search" size="28" maxlength="140" onfocus="searchBarOnFocus(this)" onblur="searchBarOnBlur(this)" />
</form>
</div>
<div id="tabcontainer">
<div id="tabs" class="nav">
<span><a id="navtab" href="#" class="btn-highlight">Navigation</a></span>
<span><a id="searchtab" href="/solr/select" class="btn">Search</a></span>
<span><a id="viewtab" href="#" class="btn">View</a></span>
<span><a id="180DayDocumentstab" href="#" class="btn">180 Day Documents</a></span>
<div class="outer-container"><div class="container">
<div id="navigationContainer"><div class="navSection">
<div class="outer-container"><div class="container">
<div class="header navigationPMTitle"><span class="crumb" id="crumb">
<a href="#" id="homeLink">Home</a> 
<span>|</span>Issue No: 013<span>|</span>Issue Date:

                                    2017-02-01</div></div><div id="navSortButtons" class="header navSortButtons">Sort by:
                                    <a href="#" class="sort_button" id="sortCommonTitle">Tile</a> 
                                    <a href="#" class="sort_button" id="sortTechname">Techname</a> 
                                    <a href="#" class="sort_button" id="sortInfoname">Infoname</a> 
                                    <a href="#" class="sort_button" id="sortDMC">DMC</a></div></div>
                                    <div class="navSection"><div id="navigationFolders">
                                    <div class="navTitleDiv"><h3 class="removeBottomPadding">Contents</h3></div>
                                    <div id="navigationFoldersDiv">

<ul class="treeView" name="treeView">

</ul>
</div></div>
<div id="navigationDocuments">
<div id="navDocumentsTitleSection" class="navTitleDiv hide"><h3 class="removeBottomPadding" id="navDocumentsTitle"></h3></div>
<div id="navigationDocumentsDiv"></div></div></div></div></div></div>
<div id="footer">
<a href="javascript:openLegal()" id="proprietaryLink">International Aero Engines Proprietary Information © 2014 - 2017.</a>
<a href="javascript:openLegal()" id="exportLink">EAR Export Classification: Not subject to the EAR per 15 C.F.R. Chapter 1, Part 734.3(b)(3).</a></div></div>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

实际上,如果我复制您的代码(仅限span代码),并且在<a id="180dayDocumentsTab">所有span代码显示在我的屏幕上后删除了结束范围。删除此锚标记后的</span>,您就可以开始了。

<span><a id="180DayDocumentstab" href="#" class="btn">180 Day Documents</a></span>

答案 1 :(得分:0)

关闭<span class="crumb" id="crumb">因为它在此之后破坏了你的div。使用小提琴整理选项可以帮助您获得更好的代码,它将帮助您查看丢失的结束标记或任何其他小代码错误。明确的代码可以让您更快地发现任何错误。