尝试获取要显示和隐藏的项目失败

时间：2016-02-01 15:29:23

标签： javascript jquery html css

当有人点击按钮查看他们想要查看的信息时，我想要显示不同的数据集。其中一部分就是现在正在工作，这就是我希望在页面加载时显示第一个信息块。但是，每当我点击其他按钮时，信息容器就会消失，它不会显示任何内容。我的控制台中没有显示任何错误，我也不知道我做错了什么。

有人看到我忽视的任何东西吗？

＆＃13;
＆＃13; 
$( document ).ready(function() {
     $('.big-three-names').click(function() {
         var i = $( this ).html();
         $('.big-three-info').css("display", "none")
         $('.big-three-info').eq(i-1).css("display", "block");
     });

     $('.big-three-info').eq(0).css("display", "block");
});
＆＃13; 
.big-three-out {
	background-color: #CCC;
	width: 100%;
	margin: auto 0;
/*	padding: 15px 0;*/
}
.big-three {
	margin: 75px 7.5% 25px 7.5%;
	height: 900px;
	border: 1px solid black;
}
#big-three-title {
	text-align: center;
	font-size: 1.6em;
	padding: 50px 0 30px 0;
}
#big-three-description {
	text-align: center;
	font-size: 1.3em;
}
#big-three-names-out {
	width: 100%;
	height: 75px;
	margin: 50px 0;
}
.big-three-names {
	display: inline-block;
	border: 2px solid #FFF;
	width: 33.05%;
	height: 100%;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	background-color: #000;
	color: #FFF;
	cursor: pointer;
}
.big-three-names:hover {
	background-color: blue;
	color: #FFF;
}
.big-three-info {
	margin: 50px 20%;
	border: 1px solid black;
	height: 550px;
  display: none;	
}
#big-three-info-title { 
	width: 100%;
	margin: 100px 0 25px 50px;
	font-size: 1.2em;
}
#big-three-info-description { 
	width: 100%;
	margin-left: 50px;
	font-size: 1em;
}
.show{
  display:block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
    <div class="big-three">
        <div id="big-three-title">The Big three</div>
        <div id="big-three-description">Description.</div>
        <div id="big-three-names-out">
            <div class="big-three-names">A</div>
            <div class="big-three-names">B</div>
            <div class="big-three-names">C</div>
            <div class="big-three-info one-sub">
                <div id="big-three-info-title">
                    A
                </div>
                <div id="big-three-info-description">
                    fdfdfsaf
                </div>
            </div>
            <div class="big-three-info two-sub">
                <div id="big-three-info-title">
                    B
                </div>
                <div id="big-three-info-description">
                    fdfafa
                </div>
            </div>
            <div class="big-three-info three-sub">
                <div id="big-three-info-title">
                    C
                </div>
                <div id="big-three-info-description">
                    fdsfsdfaf
                </div>
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

在你的隐藏/显示方法中，当你需要的只是索引时，你引用了一个元素的HTML。

像这样：

$( document ).ready(function() {
  $('.big-three-names').click(function() {
    var i = $( this ).index();
    $('.big-three-info').fadeOut()  //.css("display", "none")
    $('.big-three-info').eq(i).fadeIn()  //.css("display", "block");
  });
  $('.big-three-info').eq(0).css("display", "block");
});
.big-three-out {
	background-color: #CCC;
	width: 100%;
	margin: auto 0;
/*	padding: 15px 0;*/
}
.big-three {
	margin: 75px 7.5% 25px 7.5%;
	height: 900px;
	border: 1px solid black;
}
#big-three-title {
	text-align: center;
	font-size: 1.6em;
	padding: 50px 0 30px 0;
}
#big-three-description {
	text-align: center;
	font-size: 1.3em;
}
#big-three-names-out {
	width: 100%;
	height: 75px;
	margin: 50px 0;
}
.big-three-names {
	display: inline-block;
	border: 2px solid #FFF;
	width: 33.05%;
	height: 100%;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	background-color: #000;
	color: #FFF;
	cursor: pointer;
}
.big-three-names:hover {
	background-color: blue;
	color: #FFF;
}
.big-three-info {
	margin: 50px 20%;
	border: 1px solid black;
	height: 550px;
  display: none;	
}
#big-three-info-title { 
	width: 100%;
	margin: 100px 0 25px 50px;
	font-size: 1.2em;
}
#big-three-info-description { 
	width: 100%;
	margin-left: 50px;
	font-size: 1em;
}
.show{
  display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
    <div class="big-three">
        <div id="big-three-title">The Big three</div>
        <div id="big-three-description">Description.</div>
        <div id="big-three-names-out">
            <div class="big-three-names">A</div>
            <div class="big-three-names">B</div>
            <div class="big-three-names">C</div>
            <div class="big-three-info one-sub">
                <div id="big-three-info-title">
                    A
                </div>
                <div id="big-three-info-description">
                    fdfdfsaf
                </div>
            </div>
            <div class="big-three-info two-sub">
                <div id="big-three-info-title">
                    B
                </div>
                <div id="big-three-info-description">
                    fdfafa
                </div>
            </div>
            <div class="big-three-info three-sub">
                <div id="big-three-info-title">
                    C
                </div>
                <div id="big-three-info-description">
                    fdsfsdfaf
                </div>
            </div>
        </div>
    </div>
</div>

答案 1 :(得分：1)

Working Demo

结账以上工作演示

$('.big-three-names').click(function() {


   $(".big-three-info").hide();
   $("."+$(this).attr("class").split(" ")[1]+"-sub").show();



    });


  $(document).ready(function(){

  $(".one-sub").show()


  })

答案 2 :(得分：1)

尝试将.index()替换为.html()，从-1来电中删除.eq() 

$( document ).ready(function() {
     $('.big-three-names').click(function() {
         var i = $( this ).index();
         $('.big-three-info').css("display", "none")
         .eq(i).css("display", "block");
     });

     $('.big-three-info').eq(0).css("display", "block");
});
.big-three-out {
	background-color: #CCC;
	width: 100%;
	margin: auto 0;
/*	padding: 15px 0;*/
}
.big-three {
	margin: 75px 7.5% 25px 7.5%;
	height: 900px;
	border: 1px solid black;
}
#big-three-title {
	text-align: center;
	font-size: 1.6em;
	padding: 50px 0 30px 0;
}
#big-three-description {
	text-align: center;
	font-size: 1.3em;
}
#big-three-names-out {
	width: 100%;
	height: 75px;
	margin: 50px 0;
}
.big-three-names {
	display: inline-block;
	border: 2px solid #FFF;
	width: 33.05%;
	height: 100%;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	background-color: #000;
	color: #FFF;
	cursor: pointer;
}
.big-three-names:hover {
	background-color: blue;
	color: #FFF;
}
.big-three-info {
	margin: 50px 20%;
	border: 1px solid black;
	height: 550px;
  display: none;	
}
#big-three-info-title { 
	width: 100%;
	margin: 100px 0 25px 50px;
	font-size: 1.2em;
}
#big-three-info-description { 
	width: 100%;
	margin-left: 50px;
	font-size: 1em;
}
.show{
  display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="big-three-out">
    <div class="big-three">
        <div id="big-three-title">The Big three</div>
        <div id="big-three-description">Description.</div>
        <div id="big-three-names-out">
            <div class="big-three-names">A</div>
            <div class="big-three-names">B</div>
            <div class="big-three-names">C</div>
            <div class="big-three-info one-sub">
                <div id="big-three-info-title">
                    A
                </div>
                <div id="big-three-info-description">
                    fdfdfsaf
                </div>
            </div>
            <div class="big-three-info two-sub">
                <div id="big-three-info-title">
                    B
                </div>
                <div id="big-three-info-description">
                    fdfafa
                </div>
            </div>
            <div class="big-three-info three-sub">
                <div id="big-three-info-title">
                    C
                </div>
                <div id="big-three-info-description">
                    fdsfsdfaf
                </div>
            </div>
        </div>
    </div>
</div>

相关问题
最新问题