如何使用jQuery创建选项卡

时间：2017-08-21 09:36:50

标签： javascript jquery html css

我在图像中有四个不同的类别块，我想要做的是以下内容：

最初，我只想看到“fryking”的内容，然后如果我点击“Halaal”等不同的块，其内容必须显示在下面，并且fryking等内容需要消失

我正在努力思考如何做到这一点，所以我真的希望有人可以提供帮助。

以下是我目前的情况：

#menu_list {
  display: flex;
}
.box{
  width: 300px;
  height: 200px;
}
.one{
  background: red;
}
.two{
  background: blue;
}
.three{
  background: black;
}
<section id="menu_list">
  <div class=" box one active fryking">
      FRYKING
  </div>
  <div class="box two">
    HALAAL
  </div>
  <div class="box three">
  
  </div>
</section>
<section id="menus"> 
  <div class="fryking active" id="fryking">
    <h3 class="cat_title">Combos</h3>
    <div class="cat_content">
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of </p>
    </div><h3 class="cat_title">FIsh &amp; Chips</h3>
    <div class="cat_content">
      <p>What is Lorem Ipsum?<br>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>        
  </div>

  <div class="halaal" id="halaal">
    <h3 class="cat_title">Masala Dosa</h3>
    <div class="cat_content">
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero,</p>
    </div>       
  </div>
</section>

我看到了这个pen here，但我的项目结构不同，我无法真正改变因为它的wordpress网站

3 个答案:

答案 0 :(得分：0)

  

我在这里看到了这支笔，但我的项目结构不同，我无法真正改变因为它的wordpress网站

我不明白结构有什么问题？

如果要创建手动选项卡，可以创建类似的css类：

.no-display{
     display : none;
}

在你的jquery中，你只需要使用类名：

$('.ul.tabs').removeClass('no-display'); 
$('.ul.tabs').addClass('no-display');

简单快捷，

和平

答案 1 :(得分：0)

检查以下内容。我添加了一些CSS来隐藏/显示正确的内容。如果您可以更改HTML，事情会更有效。

$("body").on("click", ".one", function() {
  $("#menus > div").removeClass("active");
  $("#menus > div.fryking").addClass("active");
});

$("body").on("click", ".two", function() {
  $("#menus > div").removeClass("active");
  $("#menus > div.halaal").addClass("active");
});
#menu_list {
  display: flex;
}

.box {
  width: 300px;
  height: 200px;
}

.one {
  background: red;
}

.two {
  background: blue;
}

.three {
  background: black;
}

#menus>div {
  display: none;
}

#menus>div.active {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="menu_list">
  <div class=" box one active fryking">
    FRYKING
  </div>
  <div class="box two">
    HALAAL
  </div>
  <div class="box three">

  </div>
</section>
<section id="menus">
  <div class="fryking active" id="fryking">
    <h3 class="cat_title">Combos</h3>
    <div class="cat_content">
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
        up one of </p>
    </div>
    <h3 class="cat_title">FIsh &amp; Chips</h3>
    <div class="cat_content">
      <p>What is Lorem Ipsum?<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>

  <div class="halaal" id="halaal">
    <h3 class="cat_title">Masala Dosa</h3>
    <div class="cat_content">
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
        up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus
        Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero,</p>
    </div>
  </div>
</section>

答案 2 :(得分：0)

试试这个：

＆＃13;
＆＃13; 
   $(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})

})
＆＃13; 
body{
	margin-top: 100px;
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6
}
.container{
	width:600px;
	margin: 0 auto;
}



ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul.tabs li{
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}

ul.tabs li.current{
	background: #ededed;
	color: #222;
}

.tab-content{
	display: none;
	background: #ededed;
	padding: 15px;
}

.tab-content.current{
	display: inherit;
}
＆＃13; 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
    <div class="container">
    
    	<ul class="tabs">
    		<li class="tab-link current" data-tab="tab-1">Tab One</li>
    		<li class="tab-link" data-tab="tab-2">Tab Two</li>
    		<li class="tab-link" data-tab="tab-3">Tab Three</li>
    		
    	</ul>
    
    	<div id="tab-1" class="tab-content current">
    		<h4>CONTENT -1</h4>
    		 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    	</div>
    	<div id="tab-2" class="tab-content">
    		<h4>CONTENT -2</h4>
    		 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    	</div>
    	<div id="tab-3" class="tab-content">
    		<h4>CONTENT -3</h4>
    		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    	</div>
    </div><!-- container -->
＆＃13;
＆＃13;
＆＃13;

这里有更多参考资料：

Link one

link two

相关问题
最新问题