如何实现tab之间的切换

发布网友发布时间：2022-04-23 13:55

共2个回答

懂视网时间：2022-04-23 18:16

导航栏的切换特效：

html代码如下：

<ul id="tab">
 <li class="fli">tab1</li>
 <li>tab2</li>
 <li>tab3</li>
</ul>

<p id="tab_con">

 <p class="fp">aaaa</p>

 <p>bbbb</p>

 <p>cccc</p>

</p>

css样式代码如下：

 ul, li, p {
  padding: 0;
  margin: 0;
 }

 ul li {
  float: left;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #fff;
  border: 1px #bbb solid;
  border-bottom: none;
  cursor: pointer;
 }

 ul li.fli {
  background-color: #ccc;
  color: red;
 }

 ul {
  overflow: hidden;
  zoom: 1;
  list-style-type: none;
 }

 #tab_con {
  width: 304px;
  height: 200px;
 }

 #tab_con p {
  width: 304px;
  height: 200px;
  display: none;
  border: 1px #bbb solid;
  border-top: none;
 }

 #tab_con p.fp {
  display: block;
  background-color: #ccc;
 }

 .tclass{
  width: 100px;
  height: 30px;
  background: #000;
 }

js代码如下：

<script type="text/javascript">

 var tabs = document.getElementById("tab").getElementsByTagName("li");
 var ps = document.getElementById("tab_con").getElementsByTagName("p");
 for (var i = 0; i < tabs.length; i++) {
 tabs[i].onclick = function () {
  change(this);
 }
 }

 function change(obj) {

 for (var i = 0; i < tabs.length; i++) {
  if (tabs[i] == obj) {
  tabs[i].className = "fli";
  ps[i].className = "fp";
  }
  else {
  tabs[i].className = "";
  ps[i].className = "";
  }
 }
 }

</script>

热心网友时间：2022-04-23 15:24

为每一个Tab制定一个ID：
if(id = 1){
执行第一个tab
}else if(id = 2){
执行第二个TAB
} else if (x = 3){
执行第三个ta...
这里就是你要执行的activity,可以再传ID=3到这个页面，让他仍然执行第三个tab，这样选择的就是第三个TAB
}
跳转页面时，TAB的ID不变就可以。