Question

我尝试使用materialize框架在索引中创建带有单选按钮的选项卡，但它们不会在页面中加载：

＆＃13;

<ul class="tabs">
  <li class="tab ">
    <a href="#requerimentos">
      <p>
        <label for="green">GREEN</label>
        <input class="with-gap" name="group1" type="radio" id="green" />
      </p>
    </a>
  </li>
  <li class="tab ">
    <a class="active" href="#indicacoes">
      <p>
        <label for="red">RED</label>
        <input class="with-gap" name="group1" type="radio" id="red" />
      </p>
    </a>
  </li>
  <li class="tab ">
    <a href="#leis">
      <p>
        <label for="black">BLACK</label>

        <input class="with-gap" name="group1" type="radio" id="black" />
      </p>
    </a>
  </li>
</ul>
<div id="requerimentos" class="col s12">
  <p>Tab 1</p>
</div>
<div id="indicacoes" class="col s12">
  Tab 2
</div>
<div id="leis" class="col s12">
  Tab 3
</div>

＆＃13;

为什么单选按钮没有出现在标签内？ TKS

Answer 1

抱歉，我不明白你的要求。你想要一个标签内的单选按钮？或者你想把单选按钮作为标题标题？

如果你想要一个标签内的单选按钮，这是有效的：

    <ul class="tabs">
    <li class="tab ">
        <a href="#requerimentos">Green</a>
    </li>
    <li class="tab ">
        <a class="active" href="#indicacoes">red</a>
    </li>
    <li class="tab ">
        <a href="#leis">black</a>
    </li>
</ul>
<div id="requerimentos" class="col s12">
    <p>Tab 1</p>
    <form action="#">
    <p>
      <input name="group1" type="radio" id="test1" />
      <label for="test1">Red</label>
    </p>
    <p>
      <input name="group1" type="radio" id="test2" />
      <label for="test2">Yellow</label>
    </p>
    <p>
      <input class="with-gap" name="group1" type="radio" id="test3"  />
      <label for="test3">Green</label>
    </p>
      <p>
        <input name="group1" type="radio" id="test4" disabled="disabled" />
        <label for="test4">Brown</label>
    </p>
  </form>
</div>
<div id="indicacoes" class="col s12">
    Tab 2
</div>
<div id="leis" class="col s12">
    Tab 3
</div>

Answer 2

<form action="#">
    <p>
      <label>
        <input name="group1" type="radio" checked />
        <span>Red</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group1" type="radio" />
        <span>Yellow</span>
      </label>
    </p>
    <p>
      <label>
        <input class="with-gap" name="group1" type="radio"  />
        <span>Green</span>
      </label>
    </p>
    <p>
      <label>
        <input name="group1" type="radio" disabled="disabled" />
        <span>Brown</span>
      </label>
    </p>
  </form>

实现单选按钮不起作用

2 个答案: