因为网站的导航是用bootstrap做的，所有网页其他内容要适配boostrap文件，但是发现在引入 bootstrap.min.css 后网页出现2个错误：
第一：三个部分的选项卡在切换后没有数据
第二：【论坛新贴】模块中标题下方的文字不见了
打包文件下载地址：http://pan.baidu.com/s/1pKDVoj5
错误展示：
html代码部分
1
398
- 最新资讯
- 热门资讯
- 热门问答
2016-06-09
2016-06-09
2016-06-09
2016-06-09
2016-06-09
2016-06-09
2016-06-09
2016-06-09
2016-06-09
2016-06-09
2016-06-09
2016-06-09
2016-06-09
2016-06-09
怎么感觉现在的技术社区的氛围有点气氛不对呢？
交易合规 • keikeizhang • 09-08 13:10 • 最后回复来自 易董君
10
怎么感觉现在的技术社区的氛围有点气氛不对呢？
交易合规 • keikeizhang • 09-08 13:10 • 最后回复来自 易董君
10
22怎么感觉现在的技术社区的氛围有点气氛不对呢？
交易合规 • keikeizhang • 09-08 13:10 • 最后回复来自 易董君
10
- 达人榜
- 个人
- 机构
CSS 部分
*{box-sizing: content-box;}
.nav{height:55px; width:100%; background: #666;}
.header{
background: #fff;
width:1160px;
height:310px;
margin: 25px auto;
padding:20px;
}
.header_left{
width:604px;
height:300px;
overflow: hidden;
}
.header_left ul li{
width:604px;
position: relative;
float: left;
border:0px solid red;
}
.header_left ul li img{
display: block;
}
.header_left span{
display: block;
width:600px;
height:40px;
position: absolute;
bottom: 0;
opacity: 0.5;
color:#fff;
line-height: 40px;
text-indent:20px;
}
.header_right{
width: 540px;
height: 285px;
}
.nav_wrap{
border-bottom: 1px solid #ccc;
height: 40px;
}
.nav_wrap li{float: left;width:75px;margin-right: 15px;/* height: 45px; */text-align: center;color:#333;padding-bottom: 10px;}
.nav_wrap li a{
/* line-height: 40px;*/
}
.nav_wrap li a:hover {
border-bottom: 2px solid #235590;
color:#235590 !important;
font-weight: 500;
padding-bottom: 19px;
}
.header_news{
margin-top: 8px;
font-size: 16px;
color:#333;
line-height: 25px;
width:540px;
}
.header_one{
line-height: 27px;
}
.header_title{
width:430px;
float: left;
overflow: hidden;
height:22px;
font-size: 14px;
}
.header_title span{
padding:0 4px;
}
.title_color{
color:#235590;
}
.title_color:hover{text-decoration:underline;}
.header_time{
font-size: 10px;
color:#999;
width:90px;
display: inline-block;
float:left;
padding-left: 20px;
}
.line_active a{
border-bottom: 2px solid #235590;
color:#235590 !important;
font-weight: 500;
padding-bottom: 15px;
}
.main{width: 1200px; margin:0 auto; }
.main_left{width:818px;background: #fff;}
.main_left_top{height:50px; border-bottom: 1px solid #e3e3e3; line-height: 50px; }
.main_left_top_title{ margin-left: 27px;}
.main_left_top_title a{ display: block; float: left; margin-right: 40px; color: #525252;}
.main_left_top_title a .active{border-bottom: 2px solid #225599; }
.main_right{width:350px;}
/*论坛新贴+热贴*/
.cell {
padding: 10px;
font-size: 12px;
line-height: 120%;
text-align: left;
border-bottom: 1px solid #e2e2e2;
}
.active{border-bottom: 2px solid #225599;color:#225599 !important;}
.main_left_top_title{text-align: center;}
.tab2_menu{width:790px; border-bottom:1px solid #e3e3e3;overflow: hidden;}
.tab2_menu a{font-size: 16px;padding: 20px 0px 17px 0;text-align: center;display: block;}
/*列表信息内容*/
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
a:link, a:visited, a:active {
color: #778087;
text-decoration: none;
word-break: break-all;
}
.item_title {
font-size: 16px;
line-height: 130%;
text-shadow: 0px 1px 0px #fff;
word-wrap: break-word;
hyphens: auto;
}
.sep5 {
height: 5px;
}
.small {
font-size: 11px;
}
.fade {
color: #ccc;
}
a.count_livid:link, a.count_livid:active {
line-height: 12px;
font-weight: bold;
color: white;
background-color: #aab0c6;
display: inline-block;
padding: 2px 10px 2px 10px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
text-decoration: none;
margin-right: 5px;
word-break: keep-all;
}
img.avatar {
-moz-border-radius: 4px;
border-radius: 4px;
}
a.node:link, a.node:visited, a.node:active {
background-color: #f5f5f5;
font-size: 10px;
line-height: 10px;
display: inline-block;
padding: 4px 4px 4px 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-decoration: none;
color: #999;
}
.wq-box{padding:12px 12px; margin-bottom:32px; background-color: #fff;}
.wq-box li{padding:10px 0px;}
h3{ font-size: 16px; color: #030303; padding:0 0 15px 12px; border-bottom: 1px solid #e3e3e3;}
.ico-dot1 {
width: 6px;
height: 6px;
display: inline-block;
background: url(../images/index_icon.png);
background-position: 0px 0px;
margin-right: 10px;
vertical-align: middle;
}
.ico-dot2 {
width: 15px;
height: 12px;
display: inline-block;
background: url(../images/index_icon.png);
background-position: 0px -8px;
vertical-align: middle;
margin-right: 2px;
}
.ico-dot3 {
width: 15px;
height: 12px;
display: inline-block;
background: url(../images/index_icon.png);
background-position: 0px -20px;
vertical-align: middle;
margin-right: 2px;
}
li .text{font-size: 14px; color:#141717;width: 314px; display: inline-block;line-height: 1.5em;}
li .text{text-indent: 1;}
li .bark{ font-size: 12px; color:#a8a8a8;}
.text2 a {
display: block;
overflow: hidden;
position: relative;
font-size: 14px;
color: #141717;
line-height: 1.5em;
vertical-align: middle;
}
.text2 td:first-child{
font-size:24px;
color:#fa4702;
}
.text2 img{
display: block;
margin: 0 auto;
}
/*等您参与*/
.tp{ width: 296px ; height: 120px; margin: 0 auto; position: relative;}
.huodong{position: absolute;top:0;left:0;padding-top:30px; text-align: center;}
.huodong h5{color: #fff;width:296px;font-size: 18px;top:40px; text-shadow: 1px 1px 1px rgba(0,0,0,.6);text-align: center; font-weight:550;}
.huodong .btn{background-color:#017be3; padding: 8px 14px;font-size: 14px;color:#fff; border-radius: 4px; top: 60px;
left: 30%;
position: absolute;}
/*分类目录*/
.list{ background-color:#fff; height: 231px;}
.list a{margin:8px 15px;padding:8px 18px; float: left; background:#f5f5f6;font-size: 15px;}
/*达人榜*/
.rank{width: 353px;background-color: #fff;overflow: hidden;margin-bottom: 32px;}
.tab_rank_title{background-color: #f0f7fc;font-size: 16px;overflow:hidden;}
.tab_rank_title ul{}
.tab_rank_title ul li{width: 25%; float: left; text-align: center;padding: 23px 0;cursor: pointer;}
.tab_rank_title ul li:first-child{width: 50%;}
.active_top{background-color: #fff;border-top:2px solid #0078d1;}
.tab_rank_box{background: #fff;overflow: hidden;}
.three{font-size: 16px;padding:18px 19px;}
.three li{float: left; overflow: hidden;width:85px;text-align: center;}
.three li:nth-child(2n+0){padding:0 30px;}
.three li img{width: 65px; height: 65px; border-radius: 5px;magin-left:10px;}
.three li p{font-size: 14px;white-space:nowrap;
text-overflow: ellipsis;padding: 16px 0;width:80px; text-align: center;white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
*{padding:0; margin: 0;}
body{
background: #f6f6f8 !important;
font-size:16px;
font-family: "Microsoft Yahei" !important,'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.fl{float:left;}
.fr{float:right;}
li{ list-style-type: none;}
a{text-decoration: none; color:#333;}
a:hover{color:#235590;}
.hidden{display: none;}
*{ margin:0; padding:0;}
a{text-decoration:none; color:#333;}
li{list-style-type: none;}
body { font:14px/19px "微软雅黑",Arial, Helvetica, sans-serif; color:#666;}
.tab.bb {
width: 540px;
padding-top: 10px;
}
a.tab_box_mulu {
color: #235590;
}
.tab_menu {border-bottom: 1px solid #ccc;height: 40px; width:540px;}
.tab_menu li {float: left;text-align: center;color: #333;cursor: pointer;
margin-right: 50px; padding-bottom:20px;font-weight:500;font-size: 16px;}
.tab_menu li.hover { color:#235590; border-bottom:2px solid #235590;}
.tab_menu li.selected {color:#235590; border-bottom:2px solid #235590;}
.tab_box { clear:both;margin:10px 0; height:240px;
overflow: hidden;}
.hide{display:none}
.tab_box_title{width: 430px;
width: 430px;
float: left;
overflow: hidden;
height: 22px;
font-size: 15px;
font-family: "微软雅黑";
}
}}
.tab_box_mulu a{color:#235590 !important;}
.tab_box_title span{padding: 0 4px;}
.tab_box_time{float:right;font-size: 10px;
color: #999;
width: 90px;
display: inline-block;
float: left;
padding-left: 20px;}
.one{width:540px; overflow:hidden; margin: 4px 0;}JS部分
$(function(){
var $p_li =$("p.tab_menu ul li");
$p_li.mouseover(function(){
$(this).addClass("selected") //当前元素高亮
.siblings().removeClass("selected"); //去掉其它同辈 元素的高亮
var index = $p_li.index(this); // 获取当前点击的 元素 在 全部li元素中的索引。
$("p.tab_box > p")
//选取子节点。不选取子节点的话，会引起错误。如果里面还有p
.eq(index).show() //显示 元素对应的元素
.siblings().hide(); //隐藏其它几个同辈的
元素
})
//论坛热贴模块
var $m_title_a =$(".main_left_top_title a");
$m_title_a.click(function(){
$(this).addClass("active") //当前
元素高亮
.siblings().removeClass("active"); //去掉其它同辈 元素的高亮
var index2 = $m_title_a.index(this); // 获取当前点击的 元素 在 全部li元素中的索引。
$(".tab2_box > p")
//选取子节点。不选取子节点的话，会引起错误。如果里面还有p
.eq(index2).show() //显示 元素对应的元素
.siblings().hide(); //隐藏其它几个同辈的
元素
})
//达人榜模块
var $t_rank_title =$(".tab_rank_title li:gt(0)");
$t_rank_title.click(function(){
$(this).addClass("active_top") //当前
元素高亮
.siblings().removeClass("active_top"); //去掉其它同辈 元素的高亮
var index3 = $t_rank_title.index(this); // 获取当前点击的 元素 在 全部li元素中的索引。
$(".tab_rank_box > p")
//选取子节点。不选取子节点的话，会引起错误。如果里面还有p
.eq(index3).show() //显示 元素对应的元素
.siblings().hide(); //隐藏其它几个同辈的
元素
})
})
//]]>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
总体都看了下 你的代码太乱了 你html页面甚至都缺标签 第一个切换的内容都没有闭合
1.关于你切换没有数据是因为样式控制了JS也有问题 把那个hide样式去掉
这个是我帮你重写的，给你的每个选项卡上都加一个checkbox样式，然后检查下你的标签闭合