10 个解决方案
#1
用 js实现
function OnMouseOver(eventTarget)
{
if(eventTarget.className != "hover selected")
{
eventTarget.className = "hover"
}
}
function OnMouseOut(eventTarget)
{
if(eventTarget.className != "hover selected")
{
eventTarget.className = "tab"
}
}
function OnMouseOver(eventTarget)
{
if(eventTarget.className != "hover selected")
{
eventTarget.className = "hover"
}
}
function OnMouseOut(eventTarget)
{
if(eventTarget.className != "hover selected")
{
eventTarget.className = "tab"
}
}
#2
楼上的这个js我明白原理,我想要这种的效果,你可以复制成个html文件看看:
<!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">
body { font-size:14px; font-family:"宋体"}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(http://www.happyshow.org/sample/20061108/images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(http://www.happyshow.org/sample/20061108/images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
.tagContent { background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
.tagFrame{
background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function getTab(flag) {
var elList, i;
elList = document.getElementsByTagName("li");
for (i = 0; i < elList.length; i++){
elList[i].className ="";
}
elList[flag].className ="selectTag";
elList[flag].blur();
}
function goto(flag){
if("0"==flag){
document.all.tabIframe.src="http://www.google.com";
}else if("1"==flag){
document.all.tabIframe.src="http://www.baidu.com";
}else if("2"==flag){
document.all.tabIframe.src="http://www.sogou.com";
}
getTab(parseInt(flag));
}
//-->
</SCRIPT>
</head>
<body>
<h1>标签示例</h1>
<div id="con">
<ul id="tags">
<li><a href="javascript:void(0)" onclick="goto('0');">标签一</a></li>
<li class="selectTag"><a href="javascript:void(0)" onclick="goto('1');">标签二</a></li>
<li><a href="javascript:void(0)" onclick="goto('2');">自适应宽度的标签</a></li>
</ul>
<div id="tagContent">
<iframe class="tagFrame" name="tabIframe" src="http://www.google.com" marginheight="8" marginwidth="8" frameborder="0" width="100%" height="100%"></iframe>
</div>
</div>
<script type="text/javascript">
function selectTag(showContent,url,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
}
</script>
</body>
</html>
但是图片是我做好的几个背景图,是的,就这样的~
<!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">
body { font-size:14px; font-family:"宋体"}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(http://www.happyshow.org/sample/20061108/images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(http://www.happyshow.org/sample/20061108/images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
.tagContent { background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
.tagFrame{
background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function getTab(flag) {
var elList, i;
elList = document.getElementsByTagName("li");
for (i = 0; i < elList.length; i++){
elList[i].className ="";
}
elList[flag].className ="selectTag";
elList[flag].blur();
}
function goto(flag){
if("0"==flag){
document.all.tabIframe.src="http://www.google.com";
}else if("1"==flag){
document.all.tabIframe.src="http://www.baidu.com";
}else if("2"==flag){
document.all.tabIframe.src="http://www.sogou.com";
}
getTab(parseInt(flag));
}
//-->
</SCRIPT>
</head>
<body>
<h1>标签示例</h1>
<div id="con">
<ul id="tags">
<li><a href="javascript:void(0)" onclick="goto('0');">标签一</a></li>
<li class="selectTag"><a href="javascript:void(0)" onclick="goto('1');">标签二</a></li>
<li><a href="javascript:void(0)" onclick="goto('2');">自适应宽度的标签</a></li>
</ul>
<div id="tagContent">
<iframe class="tagFrame" name="tabIframe" src="http://www.google.com" marginheight="8" marginwidth="8" frameborder="0" width="100%" height="100%"></iframe>
</div>
</div>
<script type="text/javascript">
function selectTag(showContent,url,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
}
</script>
</body>
</html>
但是图片是我做好的几个背景图,是的,就这样的~
#3
table #TMP td
{
event:expression(
onmouseover = function()
{
this.style.backgroundImage='url(xxxxx)'
this.style.backgroundRepeat = "no-repeat";
//顯示內容
},
onmouseout = function()
{
this.style.backgroundImage='yyyy'
this.style.backgroundRepeat = "no-repeat";
}
)
{
event:expression(
onmouseover = function()
{
this.style.backgroundImage='url(xxxxx)'
this.style.backgroundRepeat = "no-repeat";
//顯示內容
},
onmouseout = function()
{
this.style.backgroundImage='yyyy'
this.style.backgroundRepeat = "no-repeat";
}
)
#4
如此特效,通常先 baidu + google
#5
helimin19(冷風.net)
你好,我对css不太了解,能否给段完整点的代码呀?
你好,我对css不太了解,能否给段完整点的代码呀?
#6
aaa
#7
a
#8
a
#9
关注
#10
用MS自带的TabStrip和MultiPage就可以实现该功能
#1
用 js实现
function OnMouseOver(eventTarget)
{
if(eventTarget.className != "hover selected")
{
eventTarget.className = "hover"
}
}
function OnMouseOut(eventTarget)
{
if(eventTarget.className != "hover selected")
{
eventTarget.className = "tab"
}
}
function OnMouseOver(eventTarget)
{
if(eventTarget.className != "hover selected")
{
eventTarget.className = "hover"
}
}
function OnMouseOut(eventTarget)
{
if(eventTarget.className != "hover selected")
{
eventTarget.className = "tab"
}
}
#2
楼上的这个js我明白原理,我想要这种的效果,你可以复制成个html文件看看:
<!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">
body { font-size:14px; font-family:"宋体"}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(http://www.happyshow.org/sample/20061108/images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(http://www.happyshow.org/sample/20061108/images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
.tagContent { background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
.tagFrame{
background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function getTab(flag) {
var elList, i;
elList = document.getElementsByTagName("li");
for (i = 0; i < elList.length; i++){
elList[i].className ="";
}
elList[flag].className ="selectTag";
elList[flag].blur();
}
function goto(flag){
if("0"==flag){
document.all.tabIframe.src="http://www.google.com";
}else if("1"==flag){
document.all.tabIframe.src="http://www.baidu.com";
}else if("2"==flag){
document.all.tabIframe.src="http://www.sogou.com";
}
getTab(parseInt(flag));
}
//-->
</SCRIPT>
</head>
<body>
<h1>标签示例</h1>
<div id="con">
<ul id="tags">
<li><a href="javascript:void(0)" onclick="goto('0');">标签一</a></li>
<li class="selectTag"><a href="javascript:void(0)" onclick="goto('1');">标签二</a></li>
<li><a href="javascript:void(0)" onclick="goto('2');">自适应宽度的标签</a></li>
</ul>
<div id="tagContent">
<iframe class="tagFrame" name="tabIframe" src="http://www.google.com" marginheight="8" marginwidth="8" frameborder="0" width="100%" height="100%"></iframe>
</div>
</div>
<script type="text/javascript">
function selectTag(showContent,url,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
}
</script>
</body>
</html>
但是图片是我做好的几个背景图,是的,就这样的~
<!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">
body { font-size:14px; font-family:"宋体"}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(http://www.happyshow.org/sample/20061108/images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(http://www.happyshow.org/sample/20061108/images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
.tagContent { background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
.tagFrame{
background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function getTab(flag) {
var elList, i;
elList = document.getElementsByTagName("li");
for (i = 0; i < elList.length; i++){
elList[i].className ="";
}
elList[flag].className ="selectTag";
elList[flag].blur();
}
function goto(flag){
if("0"==flag){
document.all.tabIframe.src="http://www.google.com";
}else if("1"==flag){
document.all.tabIframe.src="http://www.baidu.com";
}else if("2"==flag){
document.all.tabIframe.src="http://www.sogou.com";
}
getTab(parseInt(flag));
}
//-->
</SCRIPT>
</head>
<body>
<h1>标签示例</h1>
<div id="con">
<ul id="tags">
<li><a href="javascript:void(0)" onclick="goto('0');">标签一</a></li>
<li class="selectTag"><a href="javascript:void(0)" onclick="goto('1');">标签二</a></li>
<li><a href="javascript:void(0)" onclick="goto('2');">自适应宽度的标签</a></li>
</ul>
<div id="tagContent">
<iframe class="tagFrame" name="tabIframe" src="http://www.google.com" marginheight="8" marginwidth="8" frameborder="0" width="100%" height="100%"></iframe>
</div>
</div>
<script type="text/javascript">
function selectTag(showContent,url,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
}
</script>
</body>
</html>
但是图片是我做好的几个背景图,是的,就这样的~
#3
table #TMP td
{
event:expression(
onmouseover = function()
{
this.style.backgroundImage='url(xxxxx)'
this.style.backgroundRepeat = "no-repeat";
//顯示內容
},
onmouseout = function()
{
this.style.backgroundImage='yyyy'
this.style.backgroundRepeat = "no-repeat";
}
)
{
event:expression(
onmouseover = function()
{
this.style.backgroundImage='url(xxxxx)'
this.style.backgroundRepeat = "no-repeat";
//顯示內容
},
onmouseout = function()
{
this.style.backgroundImage='yyyy'
this.style.backgroundRepeat = "no-repeat";
}
)
#4
如此特效,通常先 baidu + google
#5
helimin19(冷風.net)
你好,我对css不太了解,能否给段完整点的代码呀?
你好,我对css不太了解,能否给段完整点的代码呀?
#6
aaa
#7
a
#8
a
#9
关注
#10
用MS自带的TabStrip和MultiPage就可以实现该功能