当前位置：首页 → 问答吧 → 高手进。TAB切换

高手进。TAB切换

时间：2008-11-23

来源：互联网

我这个TAB切换是不包含内容的，我只要单纯的TAB。例如首页，新闻。不包含显示内容的。

但是显示错误。或者直接就没有反映。你们帮我看下是怎么回事。谢谢了。

这个是JS代码

<script type="text/javascript">
function cleartabon() {
if(lastmenu) {
lastmenu.className = '';
}
for(var i = 0; i < menus.length; i++) {
var menu = menus[i];
if(menu.className == 'tabon') {
lastmenu = menu;
}
}
}
var menus = document.getElementById('headmenu').getElementsByTagName('a');
var lastmenu = '';
for(var i = 0; i < menus.length; i++) {
var menu = menus[i];
menu.onclick = function() {
setTimeout('cleartabon()', 1);
this.className = 'tabon';
this.blur();
}
}
cleartabon();
</script>

复制代码

这个是用到的MENU。HTML代码。

<div id="menu">
<ul id="headmenu">
<li><a href="/{maxz_sitepath}index.asp" class="tabon">首页</a></li>
{maxz_loop:itemloop 0}
<li><a href="/{maxz_sitepath}{zt_en}">{zt_typename}</a></li>
{/maxz_loop}
</ul>
</div>

复制代码

请帮我看下怎么无效？能不能在我的这个基础上帮我改下？只要菜单切换，不包含各菜单下的内容。

作者: oooge 发布时间: 2008-11-23

不是吧。这么荒凉？没人答？

作者: oooge 发布时间: 2008-11-24

我在看，才看到，不好意思。

javascript提示什么错误？

代码上看到的问题：
var menus = document.getElementById('headmenu').getElementsByTagName('a');
var lastmenu = '';
应该放到function cleartabon() 之前，因为这个函数里面要用上面两个参数。

还有script最后的一行的cleartabon();应该没用吧。

作者: 北极星发布时间: 2008-11-24

这个是我整在一个文件里的，方便调试

现在没有提示错误了。但是效果出不来

[ 本帖最后由 oooge 于 2008-11-24 20:10 编辑 ]

作者: oooge 发布时间: 2008-11-24

抱歉啊，现在要出去一下，明天一定帮你解决。

作者: 北极星发布时间: 2008-11-24

原帖由北极星于 2008-11-24 19:43 发表
抱歉啊，现在要出去一下，明天一定帮你解决。

没关系，我多试几次。摸索一下

修改一下：问题已经解决了。哈哈，原来我犯了个低级的错误。这段JS代码应该放在程序的最后执行，也就是</body>前面。
郁闷，这个代码我就发出来给大家，需要的人用着。

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{padding:0;margin:0;color:#000;font:12px/20px Verdana,Arial,Helvetica,"宋体";word-break:break-all;word-wrap:break-word;}
body{background:#FFF url(../images/hipao_top_bg.gif) repeat-x;text-align:center;}
h2,h2 *{font-weight:bold;font-size:16px;}
h3,h3 *{font-weight:bold;font-size:14px;}
input{height:17px;line-height:17px;vertical-align:middle;}
select{height:19px;line-height:19px;font-size:12px;}
ul,li,ol{list-style-type:none;list-style-position:outside;}
button,.btnNormal{height:22px;line-height:18px;padding:0 9px!important;padding:0 5px;}
a{color:#248AE0;text-decoration:none;}
a,a *{cursor:pointer;}
a img{border:0;}
#menu {margin:11px auto 0px;width:909px;height:36px;background:#none;overflow:hidden;}
#meuu ul {float:left;clear:left;}
#menu li {display:block;float:left;}
#menu li a {font-size:14px;color:#4BA0C6;padding:0 10px;height:36px;line-height:35px;display:block;float:left;text-decoration:none;}
#menu li a:hover{background:#fff;color:#666;border-top:#C9E9F7 1px solid;border-left:#C9E9F7 1px solid;border-right:#C9E9F7 1px solid;}
#menu li a.tabon {background:#fff;color:#666;border-top:#C9E9F7 1px solid;border-left:#C9E9F7 1px solid;border-right:#C9E9F7 1px solid;}
-->
</style>
</head>
<body>
<div id="menu">
<ul id="headmenu">
<li><a href="#" class="tabon">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">视频</a></li>
</ul>
</div>
<script type="text/javascript">
function cleartabon() {
if(lastmenu) {
lastmenu.className = '';
}
for(var i = 0; i < menus.length; i++) {
var menu = menus[i];
if(menu.className == 'tabon') {
lastmenu = menu;
}
}
}
var menus = document.getElementById('headmenu').getElementsByTagName('a');
var lastmenu = '';
for(var i = 0; i < menus.length; i++) {
var menu = menus[i];
menu.onclick = function() {
setTimeout('cleartabon()', 1);
this.className = 'tabon';
this.blur();
}
}
cleartabon();
</script>
</body>
</html>

复制代码

[ 本帖最后由 oooge 于 2008-11-24 20:10 编辑 ]

作者: oooge 发布时间: 2008-11-24

能解决真是太好了，昨天急着出去，没看仔细就回了，我在3楼说的是不对的，定义变量未必要放在那个函数前面，这是常识。

作者: 北极星发布时间: 2008-11-25

但问题有出现了，我用php语句和TAB结合，结果那些DIV的内容显示不出来。请问高手怎么解决？

作者: heny8 发布时间: 2008-12-06

<?php
session_start();
//if(isset($_SESSION['login']) == false || $_SESSION['login'] == false)  exit('你还没有登陆');
require 'conn.php';

//获取form的值
$bookid = $_POST['id'];
$bookname = $_POST['name'];
$bookauthor = $_POST['author'];
$bookpress = $_POST['chubanshe'];
$bookdate = $_POST['time'];    //暂时还没解决如处理日期函数

// $bookdate = date('Y-m-d H-i-s'); //处理时间插入
//$check = "select b_bookid from l_books"; // 判断主键重复值
//$result = mysqli_query($link,$check); //判断主键重复值
//$row_cnt = mysqli_num_rows($result); //判断主键重复值
//$row = mysqli_fetch_array($result,MYSQLI_ASSOC); //获取主键对比
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>图书管理</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
BODY {
FONT-SIZE: 14px; FONT-FAMILY: "宋体"
}
#con {
FONT-SIZE: 12px;
WIDTH: 600px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 578px;
}
#tags {
WIDTH: 400px;
HEIGHT: 23px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}
#tags LI {
LIST-STYLE-TYPE: none;
HEIGHT: 23px;
width: 70px;
float: left;
margin-left: 0px;
margin-right: 0px;
text-decoration: none;
display: block;
}
#divul {
margin-left: 0px;
height: 23px;
}
#tags LI A {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FLOAT: left;
PADDING-BOTTOM: 0px;
LINE-HEIGHT: 23px;
PADDING-TOP: 0px;
HEIGHT: 23px;
TEXT-DECORATION: none;
background-repeat: no-repeat;
background-position: right bottom;
background-color: #333333;
color: #FFFFFF;
}
#tags LI.emptyTag {
BACKGROUND: none transparent scroll repeat 0% 0%;
width: 4px;
}
#tags LI.selectTag {
MARGIN-BOTTOM: 0px;
POSITION: relative;
HEIGHT: 23px;
width: 100px;
margin-left: 0px;
}

#tagContent {
BACKGROUND-COLOR: #fff;
padding: 1px;
height: 570px;
border: 1px solid #339999;
}
.tagContent {
DISPLAY: none;
BACKGROUND: url(images/bg.gif) repeat-x;
WIDTH: 576px;
COLOR: #474747;
HEIGHT: 500px;
padding: 10px;
}
#tagContent DIV.selectTag {
DISPLAY:none
}
#tags a:hover {
color: #FFFFFF;
background-color: #FF0000;
}
</STYLE>
</HEAD>
<BODY>
<DIV id=con>
<div id="divul">
<UL id="tags">
  <LI><A onClick="selectTag('tagContent0',this)"
  href="javascript:void(0)">添加图书</A> </LI>
  <LI><A
  href="javascript:void(0)" onClick="selectTag('tagContent1',this)">修改图书</A> </LI>
  <LI><A onClick="selectTag('tagContent2',this)"
  href="javascript:void(0)">删除图书</A> </LI>
  </UL>
  </div>
<DIV id=tagContent>
<DIV class="tagContent selectTag" id=tagContent0>
<form action="" method="post" name="form1" id="form1">
  图书编号：
  <label>
  <input type="text" name="id" />
  </label>
  <p>图书名称：
<label>
<input type="text" name="name" />
</label>
  </p>
  <p>作者：
<label>
   
<input type="text" name="author" />
</label>
  </p>
  <p>出版社：  
<label>
<input type="text" name="chubanshe" />
</label>
  </p>
  <p>出版日期：
<label>
<input type="text" name="time" />
</label>
  </p>
  <p>
<label>
<input type="submit" name="Submit" value="添加" />
</label>
  </p>
</form>
<?php
$query = "insert into l_books(b_bookid,b_name,b_author,b_press,b_datetime)
values('$bookid','$bookname','$bookautor','$bookpress','$bookdate')";

if (!mysqli_query($link, $query)) {
printf("Errormessage: %s\n", mysqli_error($link));
mysqli_close($link);
exit('添加失败');
echo "<script> self.location='bookguanli.php?'</script>";
}
mysqli_close($link);

echo '图书添加成功<br>';
echo "<script> self.location='bookguanli.php?'</script>";
?>
<div>
<p>
</p>
</div>
</DIV>
<DIV class=tagContent id=tagContent1>第二个标签的内容</DIV>
<DIV class=tagContent id=tagContent2>第三个标签的内容</DIV>
</DIV>
</DIV>
<div>
</div>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
/*// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag.className = "";
}
selfObj.parentNode.className = "selectTag";*/
// 操作内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";

}
</SCRIPT>
</BODY></HTML>

作者: heny8 发布时间: 2008-12-06

/*if (!mysqli_query($link, $query)) {
printf("Errormessage: %s\n", mysqli_error($link));
mysqli_close($link);
exit('添加失败');
echo "<script> self.location='bookguanli.php?'</script>";
}
mysqli_close($link);

echo '图书添加成功<br>';
echo "<script> self.location='bookguanli.php?'</script>"; */

====================我把这段给注释掉，然后又能显示了~~===

作者: heny8 发布时间: 2008-12-06

dfgfdgfgfgfgfgfgf

作者: pizicai 发布时间: 2010-03-18

高手进。TAB切换

热门阅读

热门下载