Django + Jquery +选项卡，单击时不显示选项卡

Question

I'm trying to set a javascript value inside a function when the function is passed onClick, then I want my function to take the id of the clicked target save it to a var, so I can call .show on that object based on its returned javascript var id.

This is how I output the list links:

{%for stat in ip_new_list %}                        
    {% if 'Newip' in stat%}
        <li class="active"><a href onClick="showTable();" id='{{stat.1}}'>{{stat.1}} </a></li>
    {%endif%}
{%endfor%}                              
</ul> 

I hide all the tabs with a class name using the following code:

$(document).ready(function(){
        $('#loading').hide();
        $('#helppage').hide();
        $('.iptable').hide();  
    });

This is my code to show the div tag with the id of the clicked link, I have verified the div tag ids match the link ids which are '100.000.000.000' ip addresses in that format.

function showTable(clicked){
    console.log("ShowTableClicked");
    console.log(clicked.id);
    var clickedID = "#" + clicked.id;
    $(clickedID).show();
    console.log(clickedID);
}

Here is my django / html code:

<ul>
{%for stat in ip_new_list %}                        
    {% if 'Newip' in stat%}
        <li class="active" id={{stat.1}}><a href='#' onClick="showTable(this);" id={{stat.1}}>{{stat.1}}</a></li>
    {%endif%}
{%endfor%}                              
</ul> 


{%for stat in ip_new_list %}
        {% if 'Break' in stat%}
                </div> <div id="{{stat.1}}"  class='iptable'>
        {%endif%}

        {% if 'First' in stat%}
                <div id="{{stat.1}}" class='iptable'>
        {%endif%}


            {{stat.0}} | {{stat.1}} | {{stat.2}} <br>

{%endfor%}  

Here is the console output:

"ShowTableClicked" ipreport:56
"000.000.000.000" ipreport:57
"#000.000.000.000"

but the div tag still doesn't appear I used debug and inspector to verify the div tag is there with the correct ID. Please let me know if you can figure out why.

Answer 1

Your problem is in the jQuery selector line - $("#" + clickedID).show();

Selecting an element in jQuery by ID (and CSS, btw) starts with # .

More info here: http://api.jquery.com/id-selector/

Answer 2

Here is the correct working answer. I had to add link to the id of the link because it wasn't finding the div tag because they both had that id and it was changing the style or both, so in order to solve that problem I just attached the word link and removed with .replace this works quite well. Now its time to style and use fade instead of show.

Thanks for all your help.

{%for stat in ip_new_list %}                        
    {% if 'Newip' in stat%}
        <a href='#' onClick="showTable(this);" id="{{stat.1}}link">{{stat.1}}</a>
    {%endif%}
{%endfor%}                              



<div class="table-responsive">
{%for stat in ip_new_list %}
        {% if 'Break' in stat%}
                </tbody></table></div> <div id="{{stat.1}}" class='iptable'> <table class="table" id='table-data'> <tbody>
        {%endif%}   
        {% if 'First' in stat%}
                <div id="{{stat.1}}" class='iptable'><table class="table" id='table-data'><tbody>
        {%endif%}       

        {% if 'Break' in stat%}
        {%else%}
            {% if 'First' in stat%}
                {%else%}
            <tr>
                <td>{{stat.0}}</td>
                <td>{{stat.1}}</td>
                <td>{{stat.2}}</td>         
            </tr>
        {%endif%}
        {%endif%}

{%endfor%} 

</div>

At the bottom of the page added the script and changed it to this.

<script>


function showTable(clicked){
    $(".iptable").hide();
    var id = clicked.id
    id = id.replace('link', '');
    console.log(id);
    document.getElementById(id).style.display = "block";
}

</script>