jquery tab切换怎么写。？？

Posted 2023-03-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery tab切换怎么写。？？相关的知识，希望对你有一定的参考价值。

网上找了一下全都是各种插件，代码一看都是两三百行的，谁能弄个简单点的，好不好看无所谓，关键是能说明一下原理

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>垂直外边距合并</title>
<style>
h1
  display:inline-block;
  width:80px;

.active
  border:1px solid green;

.content
  display:none;

.content.active
  display:block;

</style>
</head>
<body>
<h1 class="active">TAB1</h1>
<h1>TAB2</h1>
<h1>TAB3</h1>
<div class="con">
    <div class="content active">
    这里是一的内容
    </div>
    <div class="content">
    这里是二的内容
    </div>
    <div class="content">
    这里是三的内容
    </div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(\'h1\').click(function()
  var index = $(this).index();
  $(\'.content\').eq(index).show().addClass(\'active\').siblings().removeClass(\'active\').hide();
);
</script>
</body>
</html>

　　这位网友你好，其实tab页挺简单的，上面就是我简单写了一个。你可以自己复制运行一下，改一下jQuery的路径即可。讲一下原理，上面TAB1到3是切换按钮，下面是对应内容，它们的数量是相等的，当点击上面的按钮的时候获取一下它的index，也就是一个第几个按钮，它下面相应的内容就显示，其它的内容隐藏。页面刚加载的时候只有第一个内容是显示的，有一个控制显示的类active，在点击按钮的同时只要加上对应的样式的类即可，隐藏的时候去掉对应的样式。

参考技术A

使用Jquery:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul
list-style-type: none;
list-style-position: inside;
width: 600px;
margin: 20px auto;
padding: 0;

ul li
float: left;
border: 1px solid #22ff22;
margin: 0px 3px;
padding: 10px;
background: #ddffdd;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
cursor: pointer;

.clearfix
clear: both;

#container
width: 600px;
margin: 0 auto;
height: 400px;
background: #aaaa55;

#container div
padding: 20px;

</style>
<script src="jquery.min.js"></script>
<script>
function showTag(tagNo)
for(var i=1; i<=3; i++)
$("#div"+i).css("display","none");
$("#tag"+i).css("background","#ddffdd");

$("#tag"+tagNo).css("background","#11ff11");
$("#div"+tagNo).css("display","block");

</script>
</head>
<body>
<ul>
<li id="tag1" onmouseover="showTag(1)">标签1</li>
<li id="tag2" onmouseover="showTag(2)">标签2</li>
<li id="tag3" onmouseover="showTag(3)">标签3</li>
</ul>
<div class="clearfix"></div>
<div id="container">
<div id="div1">
这是第一个div的内容
hello world!
</div>
<div id="div2" style="display:none">
这是第二个div的内容
I am a div in 2
</div>
<div id="div3" style="display:none">
这是第三个div的内容
This is div 3
</div>
</div>
</body>
</html>

不用Jquery(原生JS):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul
list-style-type: none;
list-style-position: inside;
width: 600px;
margin: 20px auto;
padding: 0;

ul li
float: left;
border: 1px solid #22ff22;
margin: 0px 3px;
padding: 10px;
background: #ddffdd;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: none;
cursor: pointer;

.clearfix
clear: both;

#container
width: 600px;
margin: 0 auto;
height: 400px;
background: #aaaa55;

#container div
padding: 20px;

</style>
<script>
function showTag(tagNo)
for(var i=1; i<=3; i++)
document.getElementById("div"+i).style.display="none";
document.getElementById("tag"+i).style.background="#ddffdd";

var tag=document.getElementById("tag"+tagNo);
tag.style.background="#11ff11";
var tagContent=document.getElementById("div"+tagNo);
tagContent.style.display="block";

</script>
</head>
<body>
<ul>
<li id="tag1" onmouseover="showTag(1)">标签1</li>
<li id="tag2" onmouseover="showTag(2)">标签2</li>
<li id="tag3" onmouseover="showTag(3)">标签3</li>
</ul>
<div class="clearfix"></div>
<div id="container">
<div id="div1">
这是第一个div的内容
hello world!
</div>
<div id="div2" style="display:none">
这是第二个div的内容
I am a div in 2
</div>
<div id="div3" style="display:none">
这是第三个div的内容
This is div 3
</div>
</div>
</body>
</html>

参考技术B

是点击切换吗？

div1，div2，div3默认显示一个，另两个隐藏

点击时候js里取到对应的显示，另外的隐藏

你说的简单的方法。。我这样讲能懂吗？