如何进行点击功能

时间：2017-04-19 14:18:53

标签： javascript jquery html5 css3

我有一个下拉菜单。如果我选择主页1 ，我想显示 HOME1 选项。如果选择 home2 选项，我想显示 HOME2 并隐藏 HOME1 选项。 选择类别每次都应显示。在这里，我尝试了一个代码。但它没有用。请帮忙做到这一点。谢谢。

＆＃13;
＆＃13; 
$('.home1').on('click', function() {
  $('.homes').hide();
  $('#HOME1').show();
});

$('.home2').on('click', function() {
  $('.homes').hide();
  $('#HOME2').show();
});
＆＃13; 
.homes {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <label class="names" for="exampleInputName2">Home Page</label>
  <select class="form-control category">
    <option>Select Home Page</option>
    <option class="home1">Home 1</option>
    <option class="home2">Home 2</option>
    <option class="home3">Home 3</option>
    <option class="home4">Home 4</option>
    <option class="home5">home 5</option>
  </select>
</div>

<div class="form-group homes" id="HOME1">
  <label class="names" for="exampleInputName2">Category</label>
  <select class="form-control category">
    <option>Select Category</option>
    <option>Slider</option>
    <option>Company Details</option>
    <option>Why Us</option>
    <option>Client Estimonials</option>
    <option>New Projects</option>
    <option>Latest News</option>
    <option>Our Clients</option>
  </select>
</div>

<div class="form-group homes" id="HOME2">
  <label class="names" for="exampleInputName2">Category</label>
  <select class="form-control category">
    <option>Select Category</option>
    <option>Slider</option>
    <option>Company Details</option>
    <option>Why Us</option>
    <option>Client Estimonials</option>
    <option>New Projects</option>
    <option>Latest News</option>
    <option>Our Clients</option>
  </select>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

$('.category').on('change', function() {
  $('.homes').hide();
  $('#' + $(this)[0].selectedOptions[0].className).fadeIn();
});
.homes {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label class="names" for="exampleInputName2">Home Page</label>
      <select class="form-control category">
        <option>Select Home Page</option>
        <option class="home1">Home 1</option>
        <option class="home2">Home 2</option>
        <option class="home3">Home 3</option>
        <option class="home4">Home 4</option>
        <option class="home5">home 5</option>
    </select>
</div>

<div class="form-group homes" id="home1">
    <label class="names" for="exampleInputName2">Category</label>
      <select class="form-control category">
        <option>Select Category</option>
        <option>Slider</option>
        <option>Company Details</option>
        <option>Why Us</option>
        <option>Client Estimonials</option>
        <option>New Projects</option>
        <option>Latest News</option>
        <option>Our Clients</option>
    </select>
</div>

<div class="form-group homes" id="home2">
    <label class="names" for="exampleInputName2">Category</label>
      <select class="form-control category">
        <option>Select Category</option>
        <option>Slider</option>
        <option>Company Details</option>
        <option>Why Us</option>
        <option>Client Estimonials</option>
        <option>New Projects</option>
        <option>Latest News</option>
        <option>Our Clients</option>
    </select>
</div>

答案 1 :(得分：2)

重组

我建议重构HTML和jQuery以增加功能和可读性。我会使id与从你可以追加它的方式输出的值相同。此外，您需要区分第一个选择和另外两个，这样您就不会错误地隐藏项目。

新代码

$('#main').on('change', function() {
  $('.homes').hide();
  $("#"+$(this).val()).show();
});
.homes {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <label class="names" for="exampleInputName2">Home Page</label>
  <select class="form-control category" id="main">
    <option>Select Home Page</option>
    <option value="home1">Home 1</option>
    <option value="home2">Home 2</option>
    <option value="home3">Home 3</option>
    <option value="home4">Home 4</option>
    <option value="home5">home 5</option>
  </select>
</div>

<div class="form-group homes" id="home1">
  <label class="names" for="exampleInputName2">Category</label>
  <select class="form-control category">
    <option>Select Category</option>
    <option>Slider</option>
    <option>Company Details</option>
    <option>Why Us</option>
    <option>Client Estimonials</option>
    <option>New Projects</option>
    <option>Latest News</option>
    <option>Our Clients</option>
  </select>
</div>

<div class="form-group homes" id="home2">
  <label class="names" for="exampleInputName2">Category</label>
  <select class="form-control category">
    <option>Select Category</option>
    <option>Slider</option>
    <option>Company Details</option>
    <option>Why Us</option>
    <option>Client Estimonials</option>
    <option>New Projects</option>
    <option>Latest News</option>
    <option>Our Clients</option>
  </select>
</div>

答案 2 :(得分：1)

检查以下代码段：

＆＃13;
＆＃13; 
$('.names.category').on('change', function(event) {
  $('.homes').hide()
  $('#' + event.target.value).show()
});
＆＃13; 
.homes {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="names" for="exampleInputName2">Home Page</label>
  <select class="form-control names category">
		<option>Select Home Page</option>
		<option value="HOME1">Home 1</option>
		<option value="HOME2">Home 2</option>
		<option value="HOME3">Home 3</option>
		<option value="HOME4">Home 4</option>
		<option value="HOME5">home 5</option>
	</select>
</div>

<div class="form-group homes" id="HOME1">
  <label class="names" for="exampleInputName2">Category</label>
  <select class="form-control category">
	        <option>Select Category</option>
	        <option>Slider</option>
		<option>Company Details</option>
		<option>Why Us</option>
		<option>Client Estimonials</option>
		<option>New Projects</option>
		<option>Latest News</option>
		<option>Our Clients</option>
	</select>
</div>

<div class="form-group homes" id="HOME2">
  <label class="names" for="exampleInputName2">Category</label>
  <select class="form-control category">
		<option>Select Category</option>
		<option>Slider</option>
		<option>Company Details</option>
		<option>Why Us</option>
		<option>Client Estimonials</option>
		<option>New Projects</option>
		<option>Latest News</option>
		<option>Our Clients</option>
	</select>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题