演示

Question

我正在尝试创建脚本/流程。我想使用jQuery交换html元素（共12个div），并停留在一个居中，响应迅速的元素中。第一个div可见，其余的隐藏。在每个div中（而不是在静态按钮列表中），都有一些链接可以让您隐藏当前div，并根据其ID取消隐藏另一个div。

JQuery Toggle似乎是最简单的方法，但是我没有弄清楚如何切换两个以上的元素。我愿意接受任何解决方案。

<section>
<div id="a">
    <p>content here</p>
        <div class="links">
            <a href="#" id="b-link">b</a> <a href="#" id="c-link">c</a>
        </div>
</div>

<div class="hidden" id="b">
    <p>content here</p>
        <div class="links">
            <a href="#" id="a-link">a</a> <a href="#" id="c-link">c</a> 
<a href="#" id="d-link">d</a>
        </div>
</div>

<div class="hidden" id="c">
    <p>content here</p>
        <div class="links">
            <a href="#" id="a-link">a</a> <a href="#" id="b-link">b</a>
        </div>
</div>

<div class="hidden" id="d">
    <p>content here</p>
        <div class="links">
            <a href="#" id="a-link">c</a> <a href="#" id="b-link">a</a>
        </div>
</div>
</section>

Answer 1

也许此链接可以帮助您为除所选元素之外的所有元素选择选择器，然后应用jquery切换

How do I use jQuery to select all children except a select element

Answer 2

这可以按照您的要求进行，我对代码做了一些更改。

按钮具有一个自定义属性from bs4 import BeautifulSoup import requests import pandas as pd url = "https://webapps1.cityofchicago.org/activeecWeb/" r = requests.get(url) soup = BeautifulSoup(r.text, "html.parser") datalist = [] for row in soup.find('table',class_="gridStyle-table").find_all("tr")[1:-1]: d = {} d['LicenseType'] = row.find_all('td')[0].get_text(strip=True) d['CompanyName'] = row.find_all('td')[1].get_text(strip=True) d['Address'] = row.find_all('td')[2].get_text(strip=True) d['Phone'] = row.find_all('td')[3].get_text(strip=True) d['Expiration'] = row.find_all('td')[4].get_text(strip=True) datalist.append(d) electricians = pd.DataFrame(datalist) electricians.to_csv("ChicagoElectriciansData.csv")，该属性与它们显示的面板的for相对应。然后，这将切换类id，该类通过.active显示面板。默认情况下，面板处于隐藏状态，直到它们处于“活动”状态。

jQuery非常简单，将click事件附加到类CSS的任何按钮上。在下面有完整评论。我的首选是使用CSS，但不必添加类，而可以使用相同的选择方法简单地.panel-switch DOM元素。

让我知道这是否不是您想要的。

演示

.toggle()

// Add click event to the buttons with class panel-switch
$(".panel-switch").click(function() {

  // Hide current active panel
  $(".panel.active").removeClass("active");

  // Activate chosen panel
  $(".panel#" + $(this).attr("for")).addClass("active");

});

.panel {
  display: none;
}

.panel.active {
  display: inherit;
}

切换显示/隐藏html内容

2 个答案:

演示