如何使jquery.tabs需要 <li> 名称而不是<a>href</a>

Question

here is an example of what i need to achieve when i click on a <li> i want to change the tabs instead of clicking on <a> i need it for a reasons is there is a way to achieve that

<script>
   $(function() {
     $( "#tabs" ).tabs();

   });
   </script>

    <div id="tabs">
        <ul>
            <li name='tabs-1'>tab1</li>
            <li name='tabs-2'>tab2</li>
            <li name='tabs-3'>tab3</li>
        </ul>
        <div id="tabs-1">...</div>
        <div id="tabs-2">...</div>
        <div id="tabs-3">...</div>
    </div>

Answer 1

 $(document).ready(function(){ $('#myTab li:last').tab('show') }); 

 .nav-tabs li { margin:10px; padding:10px; backgroung-color:#c2c2c2; border-left:1px solid #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <ul class="nav nav-tabs" id="myTab"> <li class="active" data-target="#home" data-toggle="tab">Home</li> <li data-target="#profile" data-toggle="tab">Profile</li> <li data-target="#messages" data-toggle="tab">Messages</li> <li data-target="#settings" data-toggle="tab">Settings</li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">Home</div> <div class="tab-pane" id="profile">Profile</div> <div class="tab-pane" id="messages">Message</div> <div class="tab-pane" id="settings">Settings</div> </div> 

Hope above solution meet your requirement

Answer 2

Since I understood you want to change tabs by clicking on <li> instead of clicking on <a> , maybe this will work:

$("li").on("click", function(){
    var tab_id = $(this).attr("name");
    $("#tabs div").each(function(){  //Hide all tabs
        $(this).hide();
    });
    $("#"+tab_id).show(); //Show tab
});

Answer 3

The "a" tag is an inline level element. No inline level element may have its width set. Why? Because inline level elements are meant to represent flowing text which could in theory wrap from one line to the next. In those sorts of cases, it doesn't make sense to supply the width of the element, because you don't necessarily know if it's going to wrap or not. In order to set its width, you must change its display property to block, or inline-block:

Just style the A with a display:block;:

#yourselector ul li a { display: block;}