js选项卡不在一个父元素里面怎么切换

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

选项卡 tab切换

打开边栏(ESC) 关闭边栏(ESC)

用jquery 怎么写不在同一父元素下的tab切换？

如图，上下都有选项卡，中间是切换的内容。

from clipboard

js实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      text-align: center;
    }
    nav li {
      display: inline;
      width: 24%;
      text-decoration: none;
      padding: 15px;
    }
    li:hover {
      background-color: lightblue;
    }
    section {
      height: 300px;
    }
    section.tab{display: none;}
  </style>
</head>
<body>
  <!--导航栏部分HTML代码-->
  <div id="nav">
    <nav>
      <ul>
        <li class="act">选卡1</li>
        <li>选卡2</li>
        <li>选卡3</li>
        <li>选卡4</li>
      </ul>
    </nav>
    <!--内容部分HTML代码-->
    <div id="container">
      <section class="tab" style="background-color: tomato; display: block;">内容1</section>
      <section class="tab" style="background-color: cyan;">内容2</section>
      <section class="tab" style="background-color: blueviolet;">内容3</section>
      <section class="tab" style="background-color: gold;">内容4</section>
      <section class="tab" style="background-color: tomato;">内容5</section>
      <section class="tab" style="background-color: cyan;">内容6</section>
      <section class="tab" style="background-color: blueviolet;">内容7</section>
      <section class="tab" style="background-color: gold;">内容8</section>
    </div>
    <nav>
      <ul>
        <li class="act">选卡5</li>
        <li>选卡6</li>
        <li>选卡7</li>
        <li>选卡8</li>
      </ul>
    </nav>
  </div>  
  <script>
    window.onload = function () {
      var nav = document.getElementById('nav');
      var oNav = nav.getElementsByTagName('li');

      var container = document.getElementById('container');
      var oDiv = container.getElementsByClassName('tab');
      for (var i = 0; i < oNav.length; i++) {
        oNav[i].index = i;
        oNav[i].onclick = function () {
          for (var i = 0; i < oNav.length; i++) {
            oNav[i].className = '';
            oDiv[i].style.display = "none";
          }
          this.className = 'act';
          oDiv[this.index].style.display = "block"
        }
      }
    };
  </script>
</body>
</html>

jquery实现：

<script>
      $(function () {
        $('#nav').find('li').click(function () {
          $('#nav').find('li').attr('class', '');
          $('#container').find('.tab').css('display', 'none');
          $(this).attr('class', 'active');
          $('#container').find('.tab').eq($(this).index()).css('display', 'block');
        });
      });
  </script>

赏

前一篇

window.οnlοad，οnclick不管用

后一篇

js如何循环拼接字符串

相关推荐

return和return false的区别

JavaScript | 2020-08-26 20219

1. return返回null，起到中断方法执行的效果，只要不return false事件处理函数将会继续执行，表单将提交 2. return false，事件处理函数会取消事件，不再继续向下执行。比如表单将终止提交。 <script> function validateForm(){ var username...

console.log怎样输出换行

JavaScript | 2020-04-17 14691

两个console.log()之间默认是换行的，不用单独处理，如果想输出换行，可以用 console.log( '\n' ); 其他内容如果同时打印数字和字符串，并且数字在前，打印字符串会添加引号显示。 console.log('test',1) ==》test 1 console.log(1,'test') ...