Deactivate a tab in Semantic UI

Question

Deactivate a tab in Semantic UI

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I continue to give the implementation of Semantic-UI and I am with a problem that I would have to see why it does not work.

It turns out that I have a system of 5 tabs that depend on the certain values I take from the database. One of those tabs is fixed, it is always shown but the other four tabs represent a type of user profile. If the user a type of user, say "A", the tab is displayed and the other 3 are disabled. For this I do the following:

<div class="ui top attached red inverted tabular menu">
        <a class="item active" data-tab="1">Datos Básicos</a>

      <?php
      foreach ($array as $key=> $values) {

        if($values == "1") { ?>
            <a class="item" data-tab="2">Perfil A</a>
          <?php } else{ ?>
            <a class="item disabled" data-tab="2">Perfil A</a>
          <?php }

          if($values == "2") { ?>
            <a class="item" data-tab="3">Perfil B</a>
          <?php } else{ ?>
            <a class="item disabled" data-tab="3">Perfil B</a>
          <?php }

          if($values == "3") { ?>
            <a class="item" data-tab="4">Perfil C</a>
          <?php } else{ ?>
            <a class="item disabled" data-tab="4">Perfil C</a>
          <?php }

          if($values == "4") { ?>
            <a class="item" data-tab="5">Perfil D</a>
          <?php } else{ ?>
            <a class="item disabled" data-tab="5">Perfil D</a>
          <?php }
    } ?>
    </div>

What is happening? It's like the tabs are shaded, but if I click on the tab it shows me what's in it. When you really should not let that happen. Implement something already implemented in a multiple select made in Semantic-UI and that is perfect. I do not understand why it does not work here.

For example a little above I do this:

$array = json_decode ($valorDevuelto, true);
var_dump($array);

This returns me:

array (size=3)
0 => string '1' (length=1)
1 => string '2' (length=1)
2 => string '4' (length=1)

html5 html php css semantic-ui

asked by MNibor 04.07.2017 в 15:23

source

2 answers

0

Finish solving the problem in a simpler way:

    $array = json_decode($valorDevuelto, true);
    ?>

    <div class="ui top attached red inverted tabular menu">
       <a class="item active" data-tab="0">Perfil Básico</a>
       <?php
       foreach ($array as $key=> $values) {
          if ($values == '1') { ?>
    <a class="item" data-tab="1">Perfil A</a>
  <?php }
  if ($values == '2') { ?>
    <a class="item" data-tab="2">Perfil B</a>
  <?php }
  if ($values == '3') { ?>
    <a class="item" data-tab="3">Perfil C</a>
  <?php }
  if ($values == '4') { ?>
    <a class="item" data-tab="3">Perfil D</a>
  <?php } }?>
  </div>

The idea is not to complicate me by disabling or not a tab tab, I do not show it directly and it is less problematic ...

answered by 04.07.2017 в 17:04

Is it possible to mount two ImageIcon in a JOptionPane? Error in SQLite: "attempt to write to readonly database"

score 1 · Accepted Answer

What you should do is remove the data-tab attribute so that the class disabled

works

$(document).ready(function() {
  $('.item').tab();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div class="container" style="max-width: 80%; margin: 2em auto;">
    <div class="ui four item stackable tabs menu">
        <a class="item" data-tab="first">Primera</a>
        <a class="item" data-tab="second">Segunda</a>
        <span class="item disabled">tercera</span>
        <a class="item" data-tab="fourth">Cuarta</a>
    </div>

    <div class="ui tab" data-tab="first">
        Primer tab.
    </div>

    <div class="ui tab" data-tab="second">
        Segundo tab.
    </div>

    <div class="ui tab" data-tab="third">
        Tercer tab.
    </div>

    <div class="ui tab" data-tab="fourth">
        Cuarto tab.
    </div>
</div>

As for your PHP code, you are repeating HTML code unnecessarily, you could do something like that for each element of the tab (although you can improve it even more):

<a class="item <?php echo $values == 1 ? '" data-tab="2' : 'disabled';?>">Perfil A</a>