如何创建可在不加载表单的情况下使用的选项卡 [英] How to create tabs which can be used without loading the form

问题描述

我需要创建应该独立工作的标签，而我点击标签时不应该提交表格吗？



SHOUTING删除 - OriginalGriff [ / edit]

解决方案

它使用两个div容器，您将在其中添加选项卡的内容。之后，您可以使用jQuery在单击任何标题时更改div的可见性。



它可能会是这样的，（JsFiddle测试： http：/ /jsfiddle.net/afzaal_ahmad_zeeshan/71vgu8pz/ [ ^ ] ）



HTML部分



HTML是一个单独的容器整个标签部分。您将有两个可用于触发该功能的标题项。并且两个容器用于选项卡的内容。在这里，看看，

 <   div  >  
 <！ -    标题   - >   
 <   h4     class   =  first   样式  =  font-权重：700; > 第一个标题<   / h4  >  
 <   h4     class   = 第二个 > 第二个标题<   / h4  >  
  <   br     /  >  <   br     /  >  <   br     /  >  <   br     /  >  
 <！ -    标签内容 < span class =code-comment>  - >   
 <   div     id   = 首先 >  
 <   p  > 这是第一个标签的段落。<   / p  >  
 <   / div  >  
 <   div     id   =  second >  
 <   p  > 这是第二个标签的段落。<   / p  >  
 <   / div  >  
 <   / div  >  

这是您的代码正在使用。它包含两个用于命名的标题和两个部分。



CSS部分



我们应该添加一点风格，不是吗？

。第一个 ,.  second  {
  padding  ：  10px;  
  display  ：  inline-block;  
  font-weight  ：  100;  
} 
 
。首先 {
  float  ：  left;  
} 
 
。 second  {
  FL燕麦 ：  right;  
} 
 
 < span class =code-leadattribute> h4  {
  border  ： < span class =code-keyword> 1px solid＃333;  
  background-color  ：   #cecece;  
  cursor   ： 指针;  
  font-family  ： 'Segoe UI';  
} 

jQuery部分



最重要的是jQuery部分。这是整个动画发生的部分。

（' h4'）。点击（ function （）{
// 处理点击H4
如果（

（ this ）。attr（' class'）== ' first'）{

I need to create tabs which should work independent means while i am clicking the tab it should not submit the form ?

[edit]SHOUTING removed - OriginalGriff[/edit]

解决方案

That uses two div containers, where you will be adding the content of the tab. After that you can use jQuery to change the visibility of the divs upon clicking any of the header.

It might go something like this, (JsFiddle for testing: http://jsfiddle.net/afzaal_ahmad_zeeshan/71vgu8pz/[^])

HTML part

The HTML is a single container for the entire tab section. You will have two header items that can be used to trigger the function. And two containers for the content of the tabs. Here, have a look,

<div>
    <!-- Headers -->
    <h4 class="first" style="font-weight: 700;">Header for First</h4>
    <h4 class="second">Header for Second</h4>
    <br /><br /><br /><br />
    <!-- Tab content -->
    <div id="first">
        <p>This is the paragraph for the first tab.</p>
    </div>
    <div id="second">
        <p>This is the paragraph for the second tab.</p>
    </div>
</div>

This was the code that you will be using. It contains, two headers for naming, and two sections.

CSS section

A little style should we add, shouldn't we?

.first, .second {
    padding: 10px; 
    display: inline-block;
    font-weight: 100;
}

.first {
    float: left;
}

.second {
    float: right;
}

h4 {
    border: 1px solid #333;
    background-color: #cecece;
    cursor: pointer;
    font-family: 'Segoe UI';
}

jQuery section

The main thing for this, is the jQuery section. This is the section where entire animation takes place.

('h4').click(function () { // handle the click on the H4 if(

(this).attr('class') == 'first') {

这篇关于如何创建可在不加载表单的情况下使用的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！