利用currentindexchanged实现网页动态切换导航栏选项

一、currentindexchanged介绍

在开发网页的过程中，经常需要实现导航菜单的切换，currentindexchanged事件就是用来处理这个功能的。该事件是属于QTabWidget控件的，作用是监测Tab选项的变化并且根据当前Tab选项显示不同的内容。

二、currentindexchanged的使用

currentindexchanged事件主要包括两部分：一是实现选项卡选中与非选中的颜色变化；二是在不同Tab选项下，显示不同的内容。

//选项卡选中与非选中颜色变化代码示例
QTabWidget{
    background-color:rgb(255,255,255)
}
QTabWidget::tab-bar{
    alignment:center
}
QTabBar::tab{
    background-color:rgb(200,200,200)
}
QTabBar::tab:selected{
    background-color:rgb(255,0,0)
}

辅助上面的代码，我们可以在实现了选中与非选中颜色变化的基础上，添加函数来实现在不同选项下显示不同的内容，如下代码示例：

//选项显示不同内容示例
void MainWindow::on_tabWidget_currentChanged(int index)
{
    switch(index){
        case 0:{ui->textBrowser->setText(tr("这是第一个选项"));break;}
        case 1:{ui->textBrowser->setText(tr("这是第二个选项"));break;}
        case 2:{ui->textBrowser->setText(tr("这是第三个选项"));break;}
        case 3:{ui->textBrowser->setText(tr("这是第四个选项"));break;}
        default:break;
    }
}

三、currentindexchanged的注意事项

在使用currentindexchanged事件时，需要注意：一是事件函数必须在调用之前设置connect连接；二是函数参数代表的是珂能够被关闭 （选项卡） 的选项（从0开始计算），而非当前选项（这个要注意）。

四、示例代码

下面是一个完整的使用currentindexchanged事件的示例：

//头文件部分
#include 
#include 
#include 
#include 

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    Ui::MainWindow *ui;

private slots:
    void on_tabWidget_currentChanged(int index);
};

//cpp源文件部分
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    connect(ui->tabWidget,SIGNAL(currentChanged(int)),this,SLOT(on_tabWidget_currentChanged(int)));
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_tabWidget_currentChanged(int index)
{
    switch(index){
        case 0:{ui->textBrowser->setText(tr("这是第一个选项"));break;}
        case 1:{ui->textBrowser->setText(tr("这是第二个选项"));break;}
        case 2:{ui->textBrowser->setText(tr("这是第三个选项"));break;}
        case 3:{ui->textBrowser->setText(tr("这是第四个选项"));break;}
        default:break;
    }
}

//样式文件示例
QTabWidget{
    background-color:rgb(255,255,255)
}
QTabWidget::tab-bar{
    alignment:center
}
QTabBar::tab{
    background-color:rgb(200,200,200)
}
QTabBar::tab:selected{
    background-color:rgb(255,0,0)
}