Question

我有一个带有水平菜单导航的页面标题，如AB C. A有子菜单D，E和B有子菜单F和G.默认情况下，标题F和G是隐藏的。现在我点击在B，F和G应该是可见的，而D和E应该是隐藏的。我创建了一个小函数，在单击各自的菜单时设置子菜单的显示属性，这可以正常工作，但是当页面加载时我回到正方形，这意味着显示D和E，隐藏F和G.

如何使用javascript解决这个问题？我对js很新，所以不要考虑jquery。

Answer 1

您可以设置一个cookie，其中包含有关选择了哪个菜单的信息，然后在加载页面时读取cookie并相应地设置菜单。你可以在这里找到一些不错的cookie切割器功能：http://www.quirksmode.org/js/cookies.html

Answer 2

如果可能，您可以向新网址添加哈希#。寻找那个和通过JavaScript显示的基础。

伪码： Example Here - Source to example here

var hash = location.hash
if(hash == '#menuA' || hash == '') {
    //show menuA
} else if( hash == '#menuB' ) {
   // show B
.....etc

Answer 3

抱歉，我只知道jQuery足以完成我认为你想要的东西。也许伪代码会有所帮助。如果您发布用于制作子菜单的html，可能会有所帮助。

此示例只是将nav元素与页面上的对象相关联。

SCRIPT（最好是在所有页面链接的外部.js文件中）：

//after you've set all sub-menus to display:none

//for each nav element
$('#nav a').each(function(){  //just like a for loop
    var a,b;
    // set a equal to the contents of the current nav element in the loop
    a =$(this).html();
    //set b equal to the contents of the first <h2> element on the current page
    //or to whatever you want to use to distinguish as "a match" (needs not be visible)
    b =$('h2:first').html();  
    //if the match is made... in this case, an exact match
    if(a == b){
            //Here you would have your display children code
            //or display D and E or F and G code, depending on how you've set it up               
        }else //code to execute if no match is made
    });

我不得不想出一个团队项目...我也有很多需要学习的东西。喜欢它

Answer 4

实际上，通过jQuery这很简单。我模拟了一个非常基本的菜单，其中包含无序列表和列表项here。

我知道你提到你是JavaScript的新手，我当然明白，但熟悉jQuery这样的框架绝对是必不可少的。 jQuery中的选择器功能非常强大。

使用Javascript隐藏和显示元素

4 个答案: