Question

我正在尝试切换页面上显示的内容，使用javascript给出一个菜单（可以做jquery但不确定如何）：

的javascript

function showhidediv(rad) {
    document.getElementById("general_item").style.display = "none";
    document.getElementById("specific_item").style.display = "none";
    var sectionName = rad.value;
    document.getElementById(sectionName+'_section').style.display = "block"; 
}

HTML

<ul>
  <li value="general" onclick="showhidediv(this);">General</li>
  <li value="specific" onclick="showhidediv(this);">Specific</li>
</ul>

我的两个部分是#general_section和#specific_section。

好像我无法获得＆lt;的价值。 li>点击后，继续给出值'0'。

谢谢，

Answer 1

您使用了错误的id属性来隐藏元素

没有jQuery

<ul>
  <li section="general" onclick="showhidediv(this);">General</li>
  <li section="specific" onclick="showhidediv(this);">Specific</li>
</ul>
<div id="general_section">general</div>
<div id="specific_section">specific</div>

和

function showhidediv(rad) {
    document.getElementById("general_section").style.display = "none";
    document.getElementById("specific_section").style.display = "none";
    var sectionName = rad.getAttribute('section');
    document.getElementById(sectionName+'_section').style.display = "block"; 
}

演示：Fiddle

Answer 2

HTML

<ul id="tabs">
  <li tab-content="general">General</li>
  <li tab-content="specific">Specific</li>
</ul>

<div class="contents" id="general" style="display: none">it is general tab</div>
<div class="contents" id="specific">it is Specific tab</div>

JS（jQuery）

$('#tabs li').click(function(){
    $('.contents').hide();
    $('#' + $(this).attr('tab-content')).show();
});

JSFiddle

获取elementid值以切换菜单

2 个答案: