登录  /  注册
javascript - 引入bootstap文件后，JS冲突，样式丢失
PHPz
PHPz 2017-04-11 12:55:33
[JavaScript讨论组]
0 1 280
举报

因为网站的导航是用bootstrap做的，所有网页其他内容要适配boostrap文件，但是发现在引入 bootstrap.min.css 后网页出现2个错误：
第一：三个部分的选项卡在切换后没有数据
第二：【论坛新贴】模块中标题下方的文字不见了

打包文件下载地址：http://pan.baidu.com/s/1pKDVoj5

错误展示：

html代码部分

<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> -->
<link href="css/test11.css"  rel="stylesheet"  type="text/css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/index_tab.js" type="text/javascript"></script>
</head>

<body>
  <!--菜单栏-->
    <p class="nav"></p>

      <!--第一屏-->
    <p class="header">
         <p id="demo3" class="header_left slideBox fl" style="width: 604px; height: 300px;">
              <p class="nums" style=""><a href="javascript:void(0)" class="" style="border-radius: 10px;">bb</a><a href="javascript:void(0)" style="border-radius: 10px;" class="">cc</a><a href="javascript:void(0)" style="border-radius: 10px;" class="active">dd</a><a href="javascript:void(0)" style="border-radius: 10px;" class="">aa</a></p>

            <ul class="items">
                  <li  class="active"><a href="javascript:void(0)" title="这里是测试标题一这里是测试标题一这里是测试标题一这里是测试标题一这里是测试标题一lala"><img src="images/banner01.jpg"></a></li>
                  <li ><a href="javascript:void(0)" title="这里是测试标题二"><img src="images/banner02.jpg"></a></li>
                  <li><a href="javascript:void(0)" title="这里是测试标题三"><img src="images/banner03.jpg"></a></li>
                  <li ><a href="javascript:void(0)" title="这里是测试标题四"><img src="images/banner04.jpg"></a>
                  </li>
            </ul>

        <p class="tips">
          <p class="title"><a href="javascript:void(0)">aa</a></p>
        </p>
       </p>

<!--新闻选项卡菜单-->
<p class="tab bb fr">
    <p class="tab_menu">
        <ul>
            <li class="">最新资讯</li>
            <li class="">热门资讯</li>
            <li class="selected">热门问答</li>
        </ul>
    </p>

<!--选项卡1-->
<p class="tab_box ">
  <p style="display: none;">

        <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>

         <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
  <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>

         <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
          <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>

         <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
          <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>

         <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
          <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
</p>

<!--选项卡2-->
<p class="hide" style="display: none;">
  <p>
     <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
 <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
  </p>
</p>
<!--选项卡3-->
<p class="hide" style="display: block;">
  <p>
     <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
 <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
          <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
  </p>
</p>
</p>
</p>
<!--瀑布流-->
<p class="main center">
    <p class="main_left fl">
  <p class="tab2_menu">
          <p class="main_left_top_title">
              <a href="javascript:void(0)" class="active">论坛新贴</a>
              <a href="javascript:void(0)">论坛热贴</a>
          </p>
     </p>
     <p class="tab2_box">
     <p class="two">
        <p class="cell item">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tbody>
                    <tr>
                      <td width="50" valign="top" align="center">
                        <a href="/member/keikeizhang">
                          <img src="images/touxiang48X48.jpg" class="avatar" border="0" align="default">
                        </a>
                      </td>
                      <td width="10"></td>

                      <td width="auto" valign="middle"><span class="item_title"><a href="/t/305959javascript:void(0)reply10">怎么感觉现在的技术社区的氛围有点气氛不对呢？</a></span>
                      <p class="sep5"></p>
                      <span class="small fade"><p class="votes"></p><a class="node" href="/go/programmer">交易合规</a> &nbsp;•&nbsp; <strong><a href="/member/keikeizhang">keikeizhang</a></strong> &nbsp;•&nbsp; 09-08 13:10 &nbsp;•&nbsp; 最后回复来自 <strong><a href="/member/yidongjun">易董君</a></strong></span>
                      </td>
                      <td width="70" align="right" valign="middle">

                          <a href="/t/305959javascript:void(0)reply10" class="count_livid">10</a>
                      </td>
                    </tr>
                  </tbody>
             </table>
        </p>
           <p class="cell item">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tbody>
                    <tr>
                      <td width="50" valign="top" align="center">
                        <a href="/member/keikeizhang">
                          <img src="images/touxiang48X48.jpg" class="avatar" border="0" align="default">
                        </a>
                      </td>
                      <td width="10"></td>

                      <td width="auto" valign="middle"><span class="item_title"><a href="/t/305959javascript:void(0)reply10">怎么感觉现在的技术社区的氛围有点气氛不对呢？</a></span>
                      <p class="sep5"></p>
                      <span class="small fade"><p class="votes"></p><a class="node" href="/go/programmer">交易合规</a> &nbsp;•&nbsp; <strong><a href="/member/keikeizhang">keikeizhang</a></strong> &nbsp;•&nbsp; 09-08 13:10 &nbsp;•&nbsp; 最后回复来自 <strong><a href="/member/yidongjun">易董君</a></strong></span>
                      </td>
                      <td width="70" align="right" valign="middle">

                          <a href="/t/305959javascript:void(0)reply10" class="count_livid">10</a>
                      </td>
                    </tr>
                  </tbody>
             </table>
        </p>
     </p>
      <p class="two hide" >
        <p class="cell item">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tbody>
                    <tr>
                      <td width="50" valign="top" align="center">
                        <a href="/member/keikeizhang">
                          <img src="images/touxiang48X48.jpg" class="avatar" border="0" align="default">
                        </a>
                      </td>
                      <td width="10"></td>

                      <td width="auto" valign="middle"><span class="item_title"><a href="/t/305959javascript:void(0)reply10">22怎么感觉现在的技术社区的氛围有点气氛不对呢？</a></span>
                      <p class="sep5"></p>
                      <span class="small fade"><p class="votes"></p><a class="node" href="/go/programmer">交易合规</a> &nbsp;•&nbsp; <strong><a href="/member/keikeizhang">keikeizhang</a></strong> &nbsp;•&nbsp; 09-08 13:10 &nbsp;•&nbsp; 最后回复来自 <strong><a href="/member/yidongjun">易董君</a></strong></span>
                      </td>
                      <td width="70" align="right" valign="middle">

                          <a href="/t/305959javascript:void(0)reply10" class="count_livid">10</a>
                      </td>
                    </tr>
                  </tbody>
             </table>
        </p>
      </p>
    </p>
 </p>
    <p class="main_right fr">

<!--排行榜-->
<p class="rank">
    <p class="tab_rank_title">
      <ul>
        <li>达人榜</li>
        <li class="active_top">个人</li>
        <li>机构</li>
      </ul>
    </p>

    <p class="tab_rank_box">
        <p class="three">
            <ul>
                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>78787887</p>
                  </a>
                </li>

                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>赵四</p>
                  </a>
                </li>

                  <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>我的名字是小明</p>
                  </a>
                </li>
             </ul>
             <ul>
                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>5656446565</p>
                  </a>
                </li>

                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>这是我的用户名</p>
                  </a>
                </li>

                  <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan</p>
                  </a>
                </li>
             </ul>
             <ul>
                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan</p>
                  </a>
                </li>

                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan</p>
                  </a>
                </li>

                  <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan</p>
                  </a>
                </li>
             </ul>
          </p>

          <p class="three hide">
            <ul>
                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan zhang</p>
                  </a>
                </li>

                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan zhang</p>
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan zhang</p>
                  </a>
                </li>
             </ul>
          </p>
     </p>
</p>
 </p>
</p>
</body></html>

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")            //当前<li>元素高亮
                   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
            var index =  $p_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
            $("p.tab_box > p")
            //选取子节点。不选取子节点的话，会引起错误。如果里面还有p
                    .eq(index).show()   //显示 <li>元素对应的<p>元素
                    .siblings().hide(); //隐藏其它几个同辈的<p>元素
        })

//论坛热贴模块
         var $m_title_a =$(".main_left_top_title a");
        $m_title_a.click(function(){
            $(this).addClass("active")            //当前<li>元素高亮
                   .siblings().removeClass("active");  //去掉其它同辈<li>元素的高亮
            var index2 =  $m_title_a.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
            $(".tab2_box > p")
            //选取子节点。不选取子节点的话，会引起错误。如果里面还有p
                    .eq(index2).show()   //显示 <li>元素对应的<p>元素
                    .siblings().hide(); //隐藏其它几个同辈的<p>元素
        })

//达人榜模块
var $t_rank_title =$(".tab_rank_title li:gt(0)");
        $t_rank_title.click(function(){
            $(this).addClass("active_top")            //当前<li>元素高亮
                   .siblings().removeClass("active_top");  //去掉其它同辈<li>元素的高亮
            var index3 =  $t_rank_title.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。

            $(".tab_rank_box > p")
            //选取子节点。不选取子节点的话，会引起错误。如果里面还有p
                    .eq(index3).show()   //显示 <li>元素对应的<p>元素
                    .siblings().hide(); //隐藏其它几个同辈的<p>元素
        })


    })
//]]>
PHPz
PHPz

学习是最好的投资！

全部回复(1)
天蓬老师
天蓬老师2017-04-11 12:57:33 1楼

总体都看了下 你的代码太乱了 你html页面甚至都缺标签 第一个切换的内容都没有闭合

1.关于你切换没有数据是因为样式控制了JS也有问题 把那个hide样式去掉

var listli = $(".tab_menu ul li");
var checkbox = $(".checkbox");    
listli.each(function(index){            
  $(this).hover(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
    
    checkbox.eq(index).show().siblings(".checkbox").hide();
  });
});

这个是我帮你重写的，给你的每个选项卡上都加一个checkbox样式，然后检查下你的标签闭合
赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部