完全不知所措，因为这应该是如此简单。我有一个jquery选项卡结构。在第一个标签中，我插入了一个显示为黄色框的div容器。在这个黄色的盒子div里面我试图插入一个div。显示为红色框的容器。
但是我不能让红色框出现在黄色框内。我已经尝试了通常的定位和z-index等，但奇怪的是没有任何作用。我想我已经对显而易见的事情视而不见了。
小提琴：https://jsfiddle.net/k1kphcm8/
$('.tabs-nav a').on('click', function(event) {
event.preventDefault();
$('.tab-active').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.TabContainerClass div').hide();
$($(this).attr('href')).fadeIn(300)
});
$('.tabs-nav a:first').trigger('click'); // Default.tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tabs-nav .tab-active a {
background: white;
font-size: 13px;
border-width: 1px;
border-bottom-color: white;
border-top-color: darkorange;
border-left-color: darkorange;
border-right-color: darkorange;
}
.tabs-nav a {
border-width: 0px 1px 1px 0px;
border-style: solid;
border-bottom-color: darkorange;
border-right-color: #C9C9C9;
background: #E6E6E6;
color: #7A7A7A;
display: block;
font-size: 12px;
height: 32px;
line-height: 32px;
text-align: center;
width: 122px;
}
.tabs-nav li {
float: left;
}
.TabContainerClass {
width: 491px;
height: 250px;
border: 1px solid darkorange;
border-top: 0;
clear: both;
position: relative;
background: white;
}
.YellowDivClass {
position: absolute;
background-color: yellow;
width: 350px;
height: 200px;
margin: 30px 0px 0px 20px;
z-index: 1;
}
.RedDivClass {
position: absolute;
background-color: red;
z-index: 10;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="tabs-nav">
<li class="tab-active"><a href="#YellowDiv" rel="nofollow">Countries</a>
</li>
<li class=""><a href="#tab-2" rel="nofollow">Year</a>
</li>
<li class=""><a href="#tab-3" rel="nofollow">Materials</a>
</li>
<li class=""><a href="#tab-4" rel="nofollow">Products</a>
</li>
</ul>
<div class="TabContainerClass">
<div id="YellowDiv" class="YellowDivClass">
<div id="RedDiv" class="RedDivClass"></div>
</div>
<div id="tab-2" style="display: none;">
<p>This is TAB 2</p>
</div>
<div id="tab-3" style="display: none;">
<p>This is TAB 3.</p>
</div>
<div id="tab-4" style="display: none;">
<p>This is TAB 4.</p>
</div>
</div>
答案 0 :(得分：2)
隐藏您正在使用的所有无效标签：
$('.TabContainerClass div').hide();
隐藏所有 TabContainerClass内的div，这是非意图的。而是使用此选项仅隐藏TabContainerClass的直接子项：
$('.TabContainerClass > div').hide();
$('.tabs-nav a').on('click', function(event) {
event.preventDefault();
$('.tab-active').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.TabContainerClass > div').hide();
$($(this).attr('href')).fadeIn(300)
});
$('.tabs-nav a:first').trigger('click'); // Default.tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tabs-nav .tab-active a {
background: white;
font-size: 13px;
border-width: 1px;
border-bottom-color: white;
border-top-color: darkorange;
border-left-color: darkorange;
border-right-color: darkorange;
}
.tabs-nav a {
border-width: 0px 1px 1px 0px;
border-style: solid;
border-bottom-color: darkorange;
border-right-color: #C9C9C9;
background: #E6E6E6;
color: #7A7A7A;
display: block;
font-size: 12px;
height: 32px;
line-height: 32px;
text-align: center;
width: 122px;
}
.tabs-nav li {
float: left;
}
.TabContainerClass {
width: 491px;
height: 250px;
border: 1px solid darkorange;
border-top: 0;
clear: both;
position: relative;
background: white;
}
.YellowDivClass {
position: absolute;
background-color: yellow;
width: 350px;
height: 200px;
margin: 30px 0px 0px 20px;
z-index: 1;
}
.RedDivClass {
position: absolute;
background-color: red;
z-index: 10;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul class="tabs-nav">
<li class="tab-active"><a href="#YellowDiv" rel="nofollow">Countries</a>
</li>
<li class=""><a href="#tab-2" rel="nofollow">Year</a>
</li>
<li class=""><a href="#tab-3" rel="nofollow">Materials</a>
</li>
<li class=""><a href="#tab-4" rel="nofollow">Products</a>
</li>
</ul>
<div class="TabContainerClass">
<div id="YellowDiv" class="YellowDivClass">
<div id="RedDiv" class="RedDivClass"></div>
</div>
<div id="tab-2" style="display: none;">
<p>This is TAB 2</p>
</div>
<div id="tab-3" style="display: none;">
<p>This is TAB 3.</p>
</div>
<div id="tab-4" style="display: none;">
<p>This is TAB 4.</p>
</div>
</div>
答案 1 :(得分：0)
你的选择器之一的问题。你隐藏了每个div元素，而不是只隐藏直接的div元素。所以而不是$('.TabContainerClass > div').hide();。你应该有import requests
from bs4 import BeautifulSoup
import csv
base_url = 'https://beta.companieshouse.gov.uk/'
header={'Accept':'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
'Accept-Encoding':'gzip, deflate, sdch, br',
'Accept-Language':'en-US,en;q=0.8,fr;q=0.6',
'Connection':'keep-alive',
'Cookie':'mdtp=y4Ts2Vvql5V9MMZNjqB9T+7S/vkQKPqjHHMIq5jk0J1l5l131dU0YXsq7Rr15GDyghKHrS/qcD2vdsMCVtzKByJEDZFI+roS6tN9FN5IS70q8PkCCBjgFPDZjlR1A3H9FJ/zCWXMNJbaXqF8MgqE+nhR3/lji+eK4mm/GP9b8oxlVdupo9KN9SKanxu/JFEyNXutjyN+BsxRztNem1Z+ExSQCojyxflI/tc70+bXAu3/ppdP7fIXixfEOAWezmOh3ywchn9DV7Af8wH45t8u4+Y=; mdtpdi=mdtpdi#f523cd04-e09e-48bc-9977-73f974d50cea#1484041095424_zXDAuNhEkKdpRUsfXt+/1g==; seen_cookie_message=yes; _ga=GA1.4.666959744.1484041122; _gat=1',
'Host':'https://beta.companieshouse.gov.uk/',
#'Referer':'https://beta.companieshouse.gov.uk/',
'Upgrade-Insecure-Requests':'1',
'User-Agent':'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.51 Safari/537.36'
}
session = requests.session()
url = 'https://beta.companieshouse.gov.uk/search/companies?q=SW181Db&page=1'
response = session.get(url, headers=header)
soup = BeautifulSoup(response.content,"lxml")
rslt_table = soup.find_all('a', {'title': 'View company'})
for elem in rslt_table:
det_url = base_url+elem['href']
print det_url
response = session.get(det_url, headers=header)
soup = BeautifulSoup(response.content,"lxml")
properties_col = soup.find_all('dl',{'class':'column-two-thirds'})
print properties_col