-6

我几乎完成了一个网站的工作。该网站是一个html5单页网站。

但问题是页面的一页不起作用。它的网络链接部分。

它是一个下拉框，在进行选择时显示链接

我不确定为什么。它使用 java script ，所以这可能是问题所在。（我不擅长java脚本）

Iv 在下面提供了两个链接。第一个是实际的网站。

第二个是单独工作的网络链接部分。

链接 1

链接 2

提前致谢。

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() );
});
4

2 回答 2

0

如果我的理解是正确的，那么您的问题是，在实际的网站页面上，所有链接都显示在页面加载时，而不是像示例页面中那样，它们被隐藏并仅根据选择显示。

如果是这种情况，请将 分配style: display: none;给所有单独的 div 标签。这将隐藏页面加载时的链接。你可以这样做：

<div id="Option" style="display: none;"> <a href="#">Sample</a> </div>

如果您不想使用内联样式，hidden请按以下方式创建一个 CSS 类（例如 ），并将其分配给所有需要隐藏的 Div。

.hidden{ 
    display: none;
}

JS 目前似乎隐藏了 ID 不等于所选项目值的所有 DIV。这让你mainContent1也被隐藏了。试试这个小提琴中的代码。它是您的代码的迷你版。

我hidden在部门和showTabJS 的功能中添加了一个 CSS 类，而不是

$('div').not(name).hide();

使用以下行（这将仅选择 mainContent1 中的 DIV 进行隐藏）。

$('#mainContent1 > div').not(name).hide();

于 2013-08-04T13:41:55.347 回答
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>
于 2013-08-04T15:05:58.627 回答