javascript - 获取 elementid 值以切换菜单

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。

似乎我无法获得被点击的 <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"; 
}

演示：小提琴

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