代码之家  ›  专栏  ›  技术社区  ›  Paul

使显示隐藏功能正常工作的问题

show-hide css html jquery javascript
  •  0
  • Paul  · 技术社区  · 9 年前

    我有三个标题充当按钮。按钮1、2和3。在页面加载时,我希望按钮1部分显示出来,但如果有人点击按钮2或3,上一个按钮描述将隐藏,新的按钮将出现在其位置。

    到目前为止,我无法实现这一点。我补充道 display: none; 但正如我所说,我想在页面加载时显示第一个。

    我做错了什么? 

    $('#big-three-names').click(function() {
	  var thisDescription = $('.big-three-info', $(this));
	  $('.big-three-info').not(thisDescription).hide().parent().removeClass('closed');
	  thisDescription.slideToggle(500).parent().toggleClass('closed');
	});
    .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;
}
    <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">fdmsnfdnofnkosjafnndsa.</div>
			<div id="big-three-names-out">
				<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
				<div class="big-three-info">
					<div id="big-three-info-title">
						1
					</div>
					<div id="big-three-info-description">
						Description for 1.
					</div>
				</div>
        <div class="big-three-info">
					<div id="big-three-info-title">
						2
					</div>
					<div id="big-three-info-description">
						Description for 2.
					</div>
				</div>
        <div class="big-three-info">
					<div id="big-three-info-title">
						3
					</div>
					<div id="big-three-info-description">
						Description for 3.
					</div>
				</div>
			</div>
		</div>
	</div>
    3 回复  |  直到 9 年前
        1
  •  1
  •   ketan    9 年前

    您可以使用JQuery执行以下操作。获取所选按钮的html文本并使用 .eq() JQuery的。

    首先使用显示 $('.big-three-info').eq(0).css("display", "block"); 页面加载时。 

    $('.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");
    .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/2.1.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">fdmsnfdnofnkosjafnndsa.</div>
			<div id="big-three-names-out">
				<div class="big-three-names">1</div><div class="big-three-names">2</div><div class="big-three-names">3</div>
				<div class="big-three-info">
					<div id="big-three-info-title">
						1
					</div>
					<div id="big-three-info-description">
						Description for 1.
					</div>
				</div>
        <div class="big-three-info">
					<div id="big-three-info-title">
						2
					</div>
					<div id="big-three-info-description">
						Description for 2.
					</div>
				</div>
        <div class="big-three-info">
					<div id="big-three-info-title">
						3
					</div>
					<div id="big-three-info-description">
						Description for 3.
					</div>
				</div>
			</div>
		</div>
	</div>
        2
  •  1
  •   kp singh    9 年前

    这是另一个解决方案 

    $('.big-three-info').eq(0).show();//show the first 
$('.big-three-names').click(function() {
    var index = $(this).index();//getting the index for button
    $('.big-three-info').hide().eq(index).show();//first hide all then show the div with equal index 
});

    JS Fiddle

        3
  •  1
  •   Amar Singh Bharat Patel    9 年前

    1. WORKING DEMO

    2. Updated DEMO

    HTML语言 

    <div class="big-three-out">
        <div class="big-three">
            <div id="big-three-title">The "Big Three"</div>
            <div id="big-three-description">fdmsnfdnofnkosjafnndsa.</div>
            <div id="big-three-names-out">
                <div class="big-three-names one">1</div><div class="big-three-names two">2</div><div class="big-three-names three">3</div>
                <div class="big-three-info one-sub">
                    <div id="big-three-info-title">
                        1
                    </div>
                    <div id="big-three-info-description">
                        Description for 1.
                    </div>
                </div>
        <div class="big-three-info two-sub">
                    <div id="big-three-info-title">
                        2
                    </div>
                    <div id="big-three-info-description">
                        Description for 2.
                    </div>
                </div>
        <div class="big-three-info three-sub">
                    <div id="big-three-info-title">
                        3
                    </div>
                    <div id="big-three-info-description">
                        Description for 3.
                    </div>
                </div>
            </div>
        </div>
    </div>

    JS语言 

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


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



    });

    顺便说一句 big-three-names 是你的吗 class 名称而不是 ID

    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Thirumal isireddy  ·  在导航栏顺风css中,img被扭曲,而不是将元素推到旁边
    1 年前
    eXor420  ·  如何在脚本标记中使用导出的函数?
    1 年前
    Hadi  ·  如何在无效和有效输入中选择用于更改样式的psoudo元素(after)
    1 年前
    IonicMan  ·  剑道网格在宽度过大时不显示某些列
    1 年前
    Kernier  ·  如何将数学公式支持添加到StacksEditor?
    1 年前
    Md. Ibrahim  ·  CSS网格项溢出小屏幕滚动
    1 年前
    Arjun V Srivatsa  ·  如何将系统时区信息分配给javascript中的变量?
    1 年前
    Akshay mek  ·  Vscode扩展建议不适用于某些文件夹
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号