我有一个表单，其中根据下拉框中选择的内容显示/隐藏 div。通过 jquery 使用 .show 和 .hide 可以很好地显示/隐藏字段，但是需要需要这些表单上的输入。 发生的情况是，当其中一个字段被隐藏时，表单将不会提交 - 很可能是因为这个“隐藏”字段仍然是必需的。
当在下拉列表中选择某个项目时，有没有办法一起禁用/删除此字段，而不是隐藏 div？我尝试使用 .attr("disabled", true) 但没有成功。任何帮助表示赞赏。
jQuery 片段：
$('#productpr1').on('change',function() {
if(this.value=='PRODUCT1')
{
$('.initial').show();
$('.name').show();
$('.mono').hide();
$('.comment').show();
}
else if (this.value=='PRODUCT2')
{
$('.initial').hide();
$('.name').hide();
$('.mono').show();
$('.comment').show();
}
else if (this.value=='PRODUCT3')
{
$('.initial').show();
$('.name').show();
$('.mono').show();
$('.comment').show();
}
else
{
$('.initial').show();
$('.name').show();
$('.mono').show();
$('.comment').show();
}
});
HTML：
<select name="productpr1" id="productpr1">
<option value="Please Select:0">Please select your product</option>
<option value="PRODUCT1">PRODUCT1</option>
<option value="PRODUCT2">PRODUCT2</option>
<option value="PRODUCT3">PRODUCT3</option>
</select>
<br>
<br>
<div class="initial">
<div id="Profont"><b>Initial:</b>
</div>
<input name="product1[]" …我使用了一个复选框来隐藏 div 中的内容。
我想在选中复选框时显示。
但是当复选框被选中时，隐藏的内容是不可见的。
我只想用css解决它。
label:hover, label:active {
text-decoration: underline;
}
#forgot-password-toggle {
display: none;
}
.forgot-password-content {
height: 5%;
width: 100%;
opacity: 0;
visibility: hidden;
cursor: pointer;
}
#forgot-password-toggle:checked ~ * .forgot-password-content {
display: inline;
height: 5%;
width: 100%;
opacity: 1;
pointer-events: auto;
cursor: auto;
visibility: visible;
}<label for="forgot-password-toggle">
<input id="forgot-password-toggle" type="checkbox" checked="">
forget password?</label> <br>
<div class="forgot-password-content">
<input id="email" type="email" placeholder="Email" required>
<button onclick="sendEmail()">Send</button>
</div>谢谢你让我知道。
我期待实现以下目标:
这是我的图像标记:
<div id="maps">
<div class="map-box"><h2>London & South East</h2><a href="#"><img src="/img/map_london.jpg" /></a></div>
<div class="map-box"><h2>South West, Ireland and Wales</h2> <a href="#"><img src="/img/map_south_west.jpg" /></a> </div>
<div class="map-box"><h2>South Central & Home Counties</h2> <a href="#"><img src="/img/map_south_central.jpg" /></a> </div>
<div class="map-box"><h2>North England, Northern Ireland & Scotland</h2> <a href="#"><img src="/img/map_north.jpg" /></a> </div>
<div class="map-box"><h2>Midlands</h2> <a href="#"><img src="/img/map_midlands.jpg" /></a> </div>
</div>
当用户点击图像时,我想直接在其下方显示DIV的内容.像这样:
<div id="london">
<p>content london</p>
</div>
<div id="south-west">
<p>content south west</p>
</div>
<div id="south-central">
<p>content south central</p>
</div>
<div id="north">
<p>content north</p>
</div> …我有一个按钮来切换引用的div是否可见.最初,我使用的是代码:
$('#search-options-btn').click(function() {
if ($('#search-options').is('.hidden')) {
$('#search-options').removeClass('hidden');
} else {
$('#search-options').addClass('hidden');
}
});
但是,为了找到更干净的代码,我遇到了jQuery toggle()方法,根据API有一个方法实现
.toggle( showOrHide )
showOrHide: A Boolean indicating whether to show or hide the elements.
这个描述让我相信这是一个通过传递...标识符来显示或隐藏的快捷实现方法？showOrHide进入toggle()方法.
尝试这个:
$('#search-options-btn').click(function() {
$('#search-options').toggle(showOrHide);
});
在我的firebug控制台中产生错误:
showOrHide is not defined
[Break On This Error] $('#search-options').toggle(showOrHide);
我也试过定义showOrHide为初始化的布尔值false; 错误消失了,但问题并没有解决.
根据jQuery在线API,这应该相当于
if ( showOrHide == true ) {
$('#foo').show();
} else if ( showOrHide == false ) {
$('#foo').hide();
}
除非我完全不知道它是如何工作的.任何人都可以填写我在这里做错的事吗？我找不到类似的实现.
我试图隐藏并显示某个列表.但它没有用.我正在使用jquery .toggle来获得此效果但由于某种原因列表项不会让步.真的需要对此进行解释以及为什么它不起作用.
CSS:
div#right-column-sidebar{position: absolute; top: 840px; right: -140px}
div#right-column-sidebar ol{position:absolute; right: 150px;margin:
10px 0 10px 10px; font-size: 20px; color: red;list-style-type:none}
div#right-column-sidebar ol li {list-style-type:none;margin: 10px 0 10px 0; border-
bottom: 1px dotted grey; width: 200px; display: block;}}
div#right-column-sidebar ol li a{font-size: 60%; color: blue;margin-left: 20px}
div#right-column-sidebar ol li:nth-child(11){margin-left:}
div#right-column-sidebar ol li a:hover{text-decoration: underline;}
a.button {
border: 1px solid lightgrey;no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: …我有三十个div和三十个按钮.每个按钮隐藏先前打开的div并打开不同的div.例如:
有一个名为'divnr4'的div是oppened.我按下按钮号7和divnr4消失,但出现divnr7.我怎么能这样做？我正在考虑使用类似的东西
$('#divnr').hide();
$('#divnr7').show();
但我不确定它是否有效以及如何正确地做到这一点.
请帮忙 :)
<!DOCTYPE html>
<html>
<head>
<script>
function printpage()
{
var data = 'Sample Report<br />Sample Report<br />Sample Report<br />';
var data = data+'<br/><button onclick="window.print()">Print the Report</button>';
myWindow=window.open('','','width=800,height=600');
myWindow.innerWidth = screen.width;
myWindow.innerHeight = screen.height;
myWindow.screenX = 0;
myWindow.screenY = 0;
myWindow.document.write(data);
myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="Print Preview" onclick="printpage()" />
</body>
</html>
但打印后,打印按钮仍保留在硬拷贝上.那么如何使用上述功能在打印时隐藏硬拷贝中的打印按钮？
我有一个基本的div叠加,当用户在输入框内单击时它会起作用:
HTML
<html>
<body>
<input id="search" type="text" placeholder="Search...">
</body>
</html>
CSS
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
display: block;
}
JS
$(function() {
var overlay = $('<div id="overlay"> </div>');
$("#search").one('click', function(e) {
overlay.appendTo(document.body)
});
});
我的总体目标是通过单击输入框外部,按下退出按钮或单击我打算放在表单右侧的按钮来隐藏此div.从我现在的目标来看,实现这一目标的最佳方法是什么？
我正在使用dropzone.js文件上传器.一切正常,但一旦我上传,我想清除拇指的下拉区并隐藏包含dropzone的div.事情出了差错.尽管我努力清除它们,但拇指仍然留在原位.
我已经尝试了Dropzone.js网站上的所有建议,但似乎没有任何效果.我可以使用他们的示例获得单独的删除按钮,但不能有主删除按钮.是的,我也尝试了FAQ示例.我直接从教程中获取了代码,只是添加了对库的引用,但它仍然不会删除大拇指.
<!doctype html>
<html>
<head>
<link href="style/dropzone.css?v=1.2" type="text/css" rel="stylesheet" />
<script src="js/dropzone.min.js"></script>
<script language="javascript">
function ClearDZ() {
myDropzone.removeAllFiles();
document.getElementById("container").style.display = "none";
}
</script>
<meta charset="UTF-8">
</head>
<body>
<div id=container>
<form id="myDropzone" action="/target-url" class="dropzone"></form>
<button onclick="ClearDZ()">Clear All</button>
<div>
</body>
</html>
当TabPage.Hide()没有任何效果时,为什么仍然可用？ .tcImgBase.TabPages [ "tabPage3"]隐藏();
隐藏标签页的一般实现是删除它.有人可以解释隐藏和显示的范围吗？