隐藏div javascript
隐藏div javascript
提问于 2014-01-22 19:47:52
目前我的页面上有两个div，一个叫做结果，一个在我的站点上叫做portfolio。我有一些在两者之间切换的javascript。目前，投资组合div加载，但我想切换的顺序。一开始，这看起来很简单，我只需切换
<div style="display:none">但是，这会抛出我的页面。这是所有的html标记。
<script type="text/javascript">
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
</script>
<span id="two">
<header class="title one">Portfolio</header>
<div class="spacer"></div>
<div class="title two"><?php echo fuel_var('body', 'This is a default layout. To change this layout go to the fuel/application/views/_layouts/main.php file.'); ?></div>
<section class="featured-slider">
<div id="ca-container" class="ca-container">
<div class="nav-featured">
<div class="prev-featured"></div>
<div class="next-featured"></div>
</div>
<div class="main-carousel hideme dontHide">
<div class="ca-wrapper portfolio_wrapper">
<div class="ca-item ca-item-1">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_ARDL.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Clevelandmetroparks2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>ARDL</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">ARDL</div>
</a>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_Polymerics.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Polymerics" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Polymerics</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Polymerics</div>
</a>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_Raune.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Ru.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Ruane Attorneys</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Ruane Attorneys</div>
</a>
</div>
</div>
<!--
<div class="ca-item ca-item-4">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="img/screenshots/AW_results_connecticut.png">
<div class="f-image">
<img src="img/featured/feat-04.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Connecticut Public Defenders</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Connecticut Public Defenders</div>
</a>
</div>
</div>
-->
<div class="ca-item ca-item-5">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>images/screenshots/AW_results_ clevMetroparks.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Clevelandmetroparks.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Cleveland Metroparks</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Cleveland Metroparks</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div>
</div>
</span>
<div style="display:none" id="one">
<header class="title one">Results</header>
<div class="spacer"></div><br><br>
<section class="featured-slider">
<div id="ca-container" class="ca-container">
<div class="main-carousel hideme dontHide">
<div class="ca-wrapper results_wrapper">
<div class="ca-item ca-item-1">
<div class="f-single_two">
<a href="https://vimeo.com/84619379" class="mfp-iframe" title="My YouTube Video">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/cle2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Cleveland Metroparks</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">Cleveland Metroparks</div>
</a>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="f-single_two">
<a href="http://vimeo.com/84619331" class="mfp-iframe" title="My YouTube Video">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/connecticut2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Connecticut Public Defenders</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">Connecticut Public Defenders</div>
</a>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="f-single_two">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/Screenshots/AW_Portfolio_ARDL.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/ardl2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>ARDL</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">ARDL</div>
</a>
</div>
</div>
</article>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-01-27 18:21:26
我找到了一个解决方案:当它显示为一个块时，我想出了一些问题，所以我将javascript更改为：
<script type="text/javascript">
function swap(one, two) {
document.getElementById(one).style.height = '100%';
document.getElementById(one).style.width = '100%';
document.getElementById(two).style.height = '0';
document.getElementById(two).style.width = '0';
}
</script>希望这能帮到其他人。
Stack Overflow用户
发布于 2014-01-22 19:55:17
如果您熟悉jQuery，那么有一种更简单的方法。
$('#divName').hide();
$('#divName').show();将这些放在您的切换/交换函数中。
P.S.：如果您使用id (即: div id="divName")，则在它前面加上一个'#‘，如果您使用的是类，则使用'.’。您还可以使用$('#divName').css('display', 'none')和$('#divName').css('display', 'block')。
Stack Overflow用户
发布于 2014-01-22 21:59:16
以下JavaScript应该可以工作：
<script>
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
</script>
<div id="first" style="display:none"><p>One</p></div>
<div id="second"><p>Two</p></div>
<button onclick="swap('first','second')">Swap</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21292526
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号