雅虎新闻|| BBC新闻|| CNN新闻|| 美元指数|| 中国期货指数|| 股票指数|| 黄金|| 外汇|| 英汉互译|| 昭放工具
163邮箱|| 126邮箱|| 新浪邮箱|| 企业邮箱|| 21cn邮箱|| tom邮箱|| 搜狐邮箱|| hotmail邮箱|| msn邮箱|| qq邮箱

用户登录

设为主页| 淘宝铺| 加入收藏|
您的IP:18.119.28.213您的操作系统:Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
个人便签
知识库
滑块及其js代码

源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="images/cf_tags.js"></script>
<title>无标题文档</title>
<style>

.menu_item_default{
 color:#609;
}
.menu_item_default a{
 color:#009;
}
.menu_item_default a:hover{
 color:#900;
}

.menu_item_selected{
 color:#fF0;
}
.menu_item_selected a{
 color:#fF0;
}

.menu_sub_item_area{
 position:absolute;
 display:none;
 text-align:left;
}

.menu_sub_item{
 color:#F00;
}
.menu_sub_item a{
 color:#F00;
}
</style>
</head>

<body>

<div id="menu_area">
  <ul>
    <li class="menu_item_default">
      <a href="category.php?id=1" class="menu_item_a">生鲜蔬菜</a>
    </li>
   
<div id="menu_sub_item_area_1" class="menu_sub_item_area" style="left:0px; top:100px;">
  <dl>
    <dt class="menu_sub_item">
      <a href="category.php?id=13">蔬菜</a>
    </dt>
    <dt class="menu_sub_item">
      <a href="category.php?id=13">蔬菜</a>
    </dt>
    <dt class="menu_sub_item">
      <a href="category.php?id=13">蔬菜</a>
    </dt>
  </dl>
</div>
   
    <li class="menu_item_default">
      <a href="category.php?id=1" class="menu_item_a">生鲜蔬菜2</a>
    </li>
   
   
<div id="menu_sub_item_area_2" class="menu_sub_item_area" style="left:0px; top:300px;">
  <dl>
    <dt class="menu_sub_item">
      <a href="category.php?id=13">蔬菜2</a>
    </dt>
  </dl>
</div>
   
    <li class="menu_item_default">
      <a href="category.php?id=1" class="menu_item_a">生鲜蔬菜3</a>
    </li>

<div id="menu_sub_item_area_3" class="menu_sub_item_area" style="left:0px; top:500px;">
  <dl>
    <dt class="menu_sub_item">
      <a href="category.php?id=13">蔬菜3</a>
    </dt>
  </dl>
</div>
   
  </ul>
</div> 

<script type="text/javascript">selectTag("menu_area", "menu_sub_item_area_", "menu_item_default", "menu_item_selected");</script>
</body>
</html>

 

cf_tags.js

// JavaScript Document

/**
 *
 */
function selectTag(tags_group_id, tab_prefix, tag_default_style, tag_selected_style){
 
  var cf_tag_card = document.getElementById( tags_group_id ).getElementsByTagName("li");
 var tags_num = cf_tag_card.length;
 
  for(var i=0;i<tags_num;i++){
    cf_tag_card[i].index = i;
    cf_tag_card[i].onmouseover = function(){
      for(var j=0;j<tags_num;j++){
        cf_tag_card[j].className = tag_default_style;
        document.getElementById( tab_prefix+(j+1) ).style.display = "none";
      }
      document.getElementById( tab_prefix+(this.index+1) ).style.display = "block";
      cf_tag_card[this.index].className = tag_selected_style;
   
  }
  
    cf_tag_card[i].onclick = function(){
      for(var j=0;j<tags_num;j++){
        cf_tag_card[j].className = tag_default_style;
        document.getElementById( tab_prefix+(j+1) ).style.display = "none";
      }
      document.getElementById( tab_prefix+(this.index+1) ).style.display = "block";
      cf_tag_card[this.index].className = tag_selected_style;
  }
  
    cf_tag_card[i].onmouseout = function(){
      for(var j=0;j<tags_num;j++){
        cf_tag_card[j].className = tag_default_style;
        document.getElementById( tab_prefix+(j+1) ).style.display = "none";
      }
  }
  } 
}

星期二, 06/19/2012 - 20:34 — 杨超