Question

我想通过点击选择选项打开标签。以下是我的选择选项＆amp;的代码。标签：

<select>
          <option>Select Product</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
          <option>D</option>
</select>

全部 | A | B | C |的 d

A，B，C＆amp; D是产品的类别。 A，B，C＆amp; A; D产品按类别和类别存在。全部包含所有列表。我使用jquery完成了这些选项卡功能。现在我想按照选择选项进行相同操作。

标签HTML：

<div>
 <a href="javascript:void(0);" onclick="javascript:showProduct('', this);" class="active">All</a>
<a href="javascript:void(0);"  id='a' onclick="javascript:showProduct('a', this );" >A</a>
<a href="javascript:void(0);" id='b' onclick="javascript:showProduct('b', this);">B</a>
<a href="javascript:void(0);" id='c' onclick="javascript:showProduct('c', this);" >C</a>
<a href="javascript:void(0);" id='d' onclick="javascript:showProduct('d', this);">D</a>

我需要的是：当我选择 A 时，标签 A 将处于有效状态＆amp;有内容显示。我怎么能这样做。

请帮忙。感谢

Answer 1

HTML：

<select id="option">
    <option selected value="1">Program 1</option>
    <option value="2">Program 2</option>
    <option value="3">Program 3</option>
    <option value="4">Program 4</option>
</select>
<div class="section" id="1">
    <h2 class="head">Program 1 :
        <h4>Using date function in javascript.</h4>
    </h2>
    <input type="button" onclick="date1()" value="Click to see the Date"/>
    <p id="dateTest"></p>
    <br/>
</div>
<div class="section" id="2">
    <h2 class="head">Program 2 :
        <h4>Changing content on "Button Click"</h4>
    </h2>
    <input type="button" onclick="changecontent()" value="Change"/>
    <p id="changecontent">
        Content before Click.
    </p>
    <br/>
</div>

JS：

//JS for menu view    
$(document).ready(function () {
  $('.section').hide();
  $('#1').show();
  $('#option').change(function (){
    $('.section').hide();
    $('#'+$(this).val()).show();
    if($(this).val()==8)
      init();
  });
});

您可以根据自己的要求在DIV中放置任何内容。将其视为虚拟数据。

Answer 2

HTML

<div>
    <a href="javascript:void(0);" onclick="javascript:showProduct('', this);" class="active tab_class">All</a>
    <a href="javascript:void(0);"  id='a' class="tab_class">A</a>
    <a href="javascript:void(0);"  class="tab_class" id='b'>B</a>
    <a href="javascript:void(0);"  class="tab_class" id='c' >C</a>
    <a href="javascript:void(0);"  class="tab_class" id='d'>D</a> 
</div>

    <select class="select">
              <option>Select Product</option>
              <option>A</option>
              <option>B</option>
              <option>C</option>
              <option>D</option>
    </select>

的JavaScript

$(document).ready(function(){
    $(".select").change(function(){
         var _curr_tab = $(".select option:selected").html().toLowerCase();
         $(".tab_class").removeClass("active"); // Will remove .active from all "a"
         $("#"+_curr_tab).addClass("active"); // Will add .active to a having id _curr_tab
        showProduct(_curr_tab , document.getElementById(_curr_tab));

     });


    $(".tab_class").click(function(){
      var id=$(this).attr("id");
        showProduct(id, document.getElementById(id));
    });

});

function showProduct(a,b)
{
$(".tab_class").removeClass("active");
$("#"+a).addClass("active");
}

CSS

.active{font-size:30px;}

链接到jsFiddle http://jsfiddle.net/upjmcnbL/

我希望现在它解决了你的问题... :)

根据html中选择的下拉选项选项打开标签内容？

2 个答案: