目录
回复内容:
首页 后端开发 php教程 javascript - JQ如何将两个标签关联起来啊?

javascript - JQ如何将两个标签关联起来啊?

Jun 06, 2016 pm 08:38 PM
javascript jquery php 前端

<code><div id="navbb">
      <ul class="nav navbar-nav">
        <li><a href="#">a</a></li> 
        <li><a href="#">b</a></li> 
        <li><a href="#">c</a></li> 
      </ul>
      <div class="abc">a</div>
      <div class="abc">b</div>
      <div class="abc">c</div>
</div>
</code>
登录后复制
登录后复制

假设div abc已经被隐藏
我想实现的效果是点击li里面的A的时候触发的就是显示下面div a。点击B的时候触发下面的div b。是如何做到让li(a)和div(a)对应上的呢?
因为最后会用PHP循环这段代码,

<code><div id="navbb">
      <ul class="nav navbar-nav">
        <li><a href="#">a</a></li> 
      </ul>
      <div class="abc">a</div>
</div>
</code>
登录后复制
登录后复制

如何做到无论循环多少次他们都能触发对应div的显示呢?

回复内容:

<code><div id="navbb">
      <ul class="nav navbar-nav">
        <li><a href="#">a</a></li> 
        <li><a href="#">b</a></li> 
        <li><a href="#">c</a></li> 
      </ul>
      <div class="abc">a</div>
      <div class="abc">b</div>
      <div class="abc">c</div>
</div>
</code>
登录后复制
登录后复制

假设div abc已经被隐藏
我想实现的效果是点击li里面的A的时候触发的就是显示下面div a。点击B的时候触发下面的div b。是如何做到让li(a)和div(a)对应上的呢?
因为最后会用PHP循环这段代码,

<code><div id="navbb">
      <ul class="nav navbar-nav">
        <li><a href="#">a</a></li> 
      </ul>
      <div class="abc">a</div>
</div>
</code>
登录后复制
登录后复制

如何做到无论循环多少次他们都能触发对应div的显示呢?

首先,关于上下的关联我建议你用data-属性。不过你目前没用data-,那我就先按照顺序对应了。
下面这是按对a标签后,对应的div自动toggle,你可以根据你的需要来改。

<code>$('#navbb').find('ul').on('click', 'a', function(event) {
    var index = $(event.currentTarget).parent().index();
    $('#navbb div:eq(' + index + ')').toggle()
})
</code>
登录后复制

http://segmentfault.com/q/1010000002537374

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 Dec 24, 2024 pm 04:42 PM

适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南

CakePHP 日期和时间 CakePHP 日期和时间 Sep 10, 2024 pm 05:27 PM

CakePHP 日期和时间

CakePHP 文件上传 CakePHP 文件上传 Sep 10, 2024 pm 05:27 PM

CakePHP 文件上传

CakePHP 项目配置 CakePHP 项目配置 Sep 10, 2024 pm 05:25 PM

CakePHP 项目配置

CakePHP 路由 CakePHP 路由 Sep 10, 2024 pm 05:25 PM

CakePHP 路由

讨论 CakePHP 讨论 CakePHP Sep 10, 2024 pm 05:28 PM

讨论 CakePHP

CakePHP 快速指南 CakePHP 快速指南 Sep 10, 2024 pm 05:27 PM

CakePHP 快速指南

如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 Dec 20, 2024 am 11:31 AM

如何设置 Visual Studio Code (VS Code) 进行 PHP 开发

See all articles