我几乎完成了一个网站的工作。该网站是一个html5单页网站。
但问题是该页面的一页不起作用。它是网页链接部分。
它是一个下拉框,在选择时显示链接
我不确定为什么。它使用java脚本,因此可能是问题。 (我对java脚本不好)
Iv在下面提供了两个链接。第一个是实际的网站。
第二个是网页链接部分,它可以自行运作。
提前致谢。
Javascript代码
> $(window).load(function(){
var select = $( '#dropdown' );
function showTab( name ) {
name = '#' + name;
$( 'div' ).not( name ).hide();
$( name ).show();
}
select.change( function() {
showTab( $( this ).val() );
});
showTab( select.val() );
});
答案 0 :(得分:0)
如果我的理解是正确的,那么问题在于,在实际网站页面上,所有链接都显示在页面加载上,而不是像样本页面中那样隐藏它们并仅根据选择显示。
如果是这种情况,请将style: display: none;
分配给所有单独的div标签。这将隐藏页面加载时的链接。你可以这样做:
<div id="Option" style="display: none;"> <a href="#">Sample</a> </div>
如果您不想使用内联样式,请按以下方式创建CSS类(例如hidden
),并将其分配给需要隐藏的所有Div。
.hidden{
display: none;
}
JS目前似乎隐藏了ID不等于所选项目值的所有DIV。这使你的mainContent1
也被隐藏了。尝试使用此fiddle中的代码。它是您代码的迷你版本。
我在JS的hidden
函数中添加了CSS类showTab
而不是
$('div').not(name).hide();
使用以下行(这将仅选择mainContent1中的DIV进行隐藏)。
$('#mainContent1 > div').not(name).hide();
答案 1 :(得分:0)
以下是我找到的工作代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
//-->
</script>
<style type="text/css" media="screen"><!--
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
border: 1px grey solid;
}
--></style>
</head>
<body bgcolor="#ffffff">
<form id="FormName" action="blah.php" method="get" name="FormName">
<select name="selectName" size="1" onchange="showDiv(this.value);">
<option value="">Choose One...</option>
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</select>
</form>
<p id="one" class="hiddenDiv">This is paragraph 1.</p>
<p id="two" class="hiddenDiv">This is paragraph 2.</p>
<p id="three" class="hiddenDiv">This is paragraph 3.</p>
</body>
</html>