开发者

default menu option

开发者 https://www.devze.com 2022-12-22 12:28 出处:网络
how can I make this menu here have the default be the \"about\" tab?开发者_开发问答 http://www.sohtanaka.com/web-design/examples/horizontal-subnav/

how can I make this menu here have the default be the "about" tab?开发者_开发问答

http://www.sohtanaka.com/web-design/examples/horizontal-subnav/

so when your mouse isnt hovering over any of them, its on the about tab?


I'd give the about <li> a class for this, maybe class="default", making it easy to change later. Then, just change the hover function to account for this:

$("ul#topnav li").unbind().hover(function() {
  $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'})
         .find("span").show();
  $(this).siblings('li').css({ 'background' : 'none'}).find("span").hide();
} , function() {
  if($(this).hasClass('default')) return;
  $(this).css({ 'background' : 'none'})
         .find("span").hide();
  $(this).siblings('.default').mouseenter();
});

You can view a demo of it here, if you want it shown when the page initially loads as well, you can do this:

$("ul#topnav li.default").mouseenter();

I'm not sure how you're using this in your site, but I'd put the hover styles into a .hover class, and then you can do:

  • .addClass('hover') instead of .css({ 'background' : '#1376c9 ...})
  • .removeClass('hover') instead of .css({ 'background' : 'none'})


Something like

$("ul#topnav li:nth-child(2)").find("span").show();

Will get the 2nd li from the <ul id="nav"> and display the span block below it.

0

精彩评论

暂无评论...
验证码 换一张
取 消